3

我正在使用 VueJS 2.6.12 的开发版本。

在我的 HTML 中，我有一个看起来像这样的 VueJS 模板（为了小例子，我已经把它剥离了）：

<div>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>

    <tbody id="main">
       <my-item v-for="item in dataset" :d="item" :key="item.key"/>       <!-- (this part works) -->
    </tbody>
  </table>
</div>

在我的 JavaScript 中，我像这样定义了一个全局 Vue 组件（这很有效，显示了我的数据）：

Vue.component('my-item', {
  props: ["d"],
  template: `<tr><td>{{this.d.AAA}}</td><td>{{this.d.BBB}}</td></tr>`
});

当我加载页面时，我看到我的数据正确呈现，但表格标题位于底部。元素（包含我的tr数据）存在，尽管在.table

在浏览器检查器中查看 DOM 显示 VueJS 构建了这个结构，将元素提升到外部tbody甚至table自身：

<div>
  <tr><td>aaa</td><td>bbb</td></tr>               <!-- Why are these two rows outside the table? -->
  <tr><td>yyy</td><td>zzz</td></tr>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>
    <tbody id="main"></tbody>
  </table>
</div>

为什么会发生这种情况，我该如何解决？ 我期待我的 <tr>...</tr> 元素被注入到标题行tbody下方的那个中。thead

甚至有点奇怪，如果我在上面和下面手动添加一些行：

    <tbody id="main">
       <tr><td>111</td><td>222</td></tr>
       <my-item v-for="item in dataset" :d="item" :key="item.key"/>
       <tr><td>888</td><td>999</td></tr>
    </tbody>

那些确实得到了保留：

<div>
  <tr><td>aaa</td><td>bbb</td></tr>         <!-- ...but these still got hoisted out if the table -->
  <tr><td>yyy</td><td>zzz</td></tr>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>
    <tbody id="main">
      <tr><td>111</td><td>222</td></tr>
      <tr><td>888</td><td>999</td></tr>
    </tbody>
  </table>
</div>
4

1 回答 1

3

呃，被同样的问题所困扰，形式略有不同。

简而言之，有DOM Parsing Caveats，并且诸如元素之类table的元素对可以出现在其中的元素有限制。（仅供参考：ul，，ol也select有这个问题）。

解决方案是使用 VueJS 的is属性：

<div>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>

    <tbody id="main">
       <!-- Specify the element, but then use  is="component-name" -->
       <tr is="my-item" v-for="item in dataset" :d="item" :key="item.key"/>
    </tbody>
  </table>
</div>

这将导致模板解析很愉快，因为table(and tbody) 将获得一个 " tr" 元素，但其内容将由命名组件呈现。

重要提示：从 VueJS 2（如上所示）到 VueJS 3 的重大变化。

在 VueJS 2 中，在 VueJS 3is="..."中变成了 `v-is="..."。

此外，VueJS 2 采用了一个字符串，而 VueJS 现在采用了一个 Javascript表达式，这意味着您必须向它传递一个字符串，例如<tr v-is="'my-item'">带引号。

请参阅https://v3.vuejs.org/guide/component-basics.html#dom-template-parsing-caveats和https://v3.vuejs.org/guide/migration/custom-elements-interop.html#v -is-for-in-dom-template-parsing-workarounds了解详细信息。

于 2020-10-02T01:21:26.283 回答