页面无法显示！

[FalconWu2017]

很奇怪。 leader上点前面3个按钮都可以显示页面，唯独第四个点了没反应，看了半天没看出啥原因。
idx-leader.html

<template component>
    <style>
        .hide {
            display: none !important;
        }
    </style>
    <link rel="stylesheet" href="./mycss.css" />

    <header>

        <h1>Api Service开发工具</h1>
        <nav>
            <button on:click="pagename='db-tables'">数据库模型</button>
            <button on:click="pagename='dbf-getdbmodel'">数据表模型</button>
            <button on:click="pagename='fmt-jsontoselect'">json字符串转select</button>
            <button on:click="pagename='fmt-GIS'">生成InsertAndSelect</button>
        </nav>
        <hr />
        <x-if :value="pagename=='db-tables'">
            <l-m src="db-tables.html"></l-m>
        </x-if>
        <x-if :value="pagename=='dbf-getdbmodel'">
            <l-m src="dbf-getdbmodel.html"></l-m>
        </x-if>
        <x-if :value="pagename=='fmt-jsontoselect'">
            <l-m src="fmt-jsontoselect.html"></l-m>
        </x-if>
        <x-if :value="pagename=='fmt-GIS'">
            <l-m src="fmt-getInsertSelect.html"></l-m>
        </x-if>

        <div class:hide="pagename !== 'db-tables'">
            <db-tables></db-tables>
        </div>
        <div class:hide="pagename !== 'dbf-getdbmodel'">
            <dbf-getdbmodel></dbf-getdbmodel>
        </div>
        <div class:hide="pagename !== 'fmt-jsontoselect'">
            <fmt-jsontoselect></fmt-jsontoselect>
        </div>
        <div class:hide="pagename !== 'fmt-GIS'">
            <fmt-getInsertSelect></fmt-getInsertSelect>
        </div>
        <hr />
    </header>

    <script>
        export default {
            data: {
                pagename:""
            },
            proto: {
            },
            watch:{
                pagename(n){
                    console.log("pagename:",n);
                }
            }
        }
    </script>
</template>

fmt-getInsertSelect.html

<template component>

   <div>
        <h2>将jsoin字符串转换为响应的select语句11111111111111111</h2>
   </div>
</template>

[kirakiray]

fmt-getInsertSelect.html 组件命名出了问题，原生 html 不能使用大写字母，要用 - 分割。最好给组件定义 tag 属性，这样不会受到文件命名的影响。

<!--idx-leader.html-->
<template component>
  <style>
    .hide {
      display: none !important;
    }
  </style>
  <link rel="stylesheet" href="./mycss.css" />

  <header>
    <h1>Api Service开发工具</h1>
    <nav>
      <button on:click="pagename='db-tables'">数据库模型</button>
      <button on:click="pagename='dbf-getdbmodel'">数据表模型</button>
      <button on:click="pagename='fmt-jsontoselect'">json字符串转select</button>
      <button on:click="pagename='fmt-GIS'">生成InsertAndSelect</button>
    </nav>
    <hr />
    <x-if :value="pagename=='db-tables'">
      <l-m src="db-tables.html"></l-m>
    </x-if>
    <x-if :value="pagename=='dbf-getdbmodel'">
      <l-m src="dbf-getdbmodel.html"></l-m>
    </x-if>
    <x-if :value="pagename=='fmt-jsontoselect'">
      <l-m src="fmt-jsontoselect.html"></l-m>
    </x-if>
    <x-if :value="pagename=='fmt-GIS'">
      <l-m src="./fmt-getinsert-select.html"></l-m>
    </x-if>

    <div class:hide="pagename !== 'db-tables'">
      <db-tables></db-tables>
    </div>
    <div class:hide="pagename !== 'dbf-getdbmodel'">
      <dbf-getdbmodel></dbf-getdbmodel>
    </div>
    <div class:hide="pagename !== 'fmt-jsontoselect'">
      <fmt-jsontoselect></fmt-jsontoselect>
    </div>
    <div class:hide="pagename !== 'fmt-GIS'">
      <fmt-getInsert-select></fmt-getInsert-select>
    </div>
    <hr />
  </header>

  <script>
    export default {
      data: {
        pagename: "",
      },
      proto: {},
      watch: {
        pagename(n) {
          console.log("pagename:", n);
        },
      },
    };
  </script>
</template>

<!--fmt-getinsert-select.html-->
<template component>
  <style>
    :host {
      display: block;
    }
  </style>
  <div>
    <h2>将jsoin字符串转换为响应的select语句11111111111111111</h2>
  </div>
  <script>
    export default {
      tag: "fmt-getinsert-select",
    };
  </script>
</template>

[FalconWu2017]

多谢！ 这还真是，很奇怪的限制。