Question

未找到上下文...

＆＃13;

Vue.component("custom-table", {
    name: 'CustomTable',
    template: "#custom-table",
    created: function() {
      console.log('Created', this.rows);
    },
    mounted: function() {
      console.log('Mounted', this.rows);
    },
    data: function() {
    },
    props: {
        rows: Array
    }
});

＆＃13;

<script type="text/x-template" id="custom-table">
    <table>
        <thead>
            <slot name="head"></slot>
        </thead>
        <tbody slot name="body">
        </tbody>
    </table
</script>


<custom-table :rows="myRows">
  <thead slot="head">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody v-for="it in myRows">
    <tr slot="body">
      <td>{{ it.name }}</td>
      <td>{{ it.ange }}</td>
    </tr>
  </tbody>
</custom-table>

＆＃13;

我收到了这个错误..

财产或方法＆＃34;它＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

myRows是

[
  { name: 'Name1', age: 20 },
  { name: 'Name2', age: 30 }
]

Answer 1

您无法在表格外使用thead和tbody元素 - 在解析过程中，浏览器将修复＆＃39;代码作为你的:)这是众所周知的，记录的警告，顺便说一句。所以，改进你的代码。我这样使用自定义表：

＆＃13;

Vue.component("custom-table", {
  name: 'CustomTable',
  template: "#custom-table",
  props: {
    cols: Array,
    rows: Array
  }
})

new Vue({
  el: '#app',
  data: {
    myRows: [
      {name: 'Name1', age: 20},
      {name: 'Name2', age: 30}
    ]
  }
})

＆＃13;

<div id="app">
  <custom-table
    :cols="['Name', 'Age']"
    :rows="myRows"
  ></custom-table>
</div>

<script type="text/x-template" id="custom-table">
  <table>
    <thead>
      <tr>
        <th v-for="col in cols">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in rows">
        <td>{{ it.name }}</td>
        <td>{{ it.age }}</td>
      </tr>
    </tbody>
  </table>
</script>

<script src="https://unpkg.com/vue"></script>

＆＃13;

未采用插槽上下文

1 个答案: