Javascript 在vue.js中动态添加元素

tl；dr：我正在生成一个表格，其中包含与下图类似的可编辑单元格。我有它，所以单元格是可编辑的，总的更新，但我正在努力找出我需要遵循的过程，以实际添加新行和列

除总计之外的所有单元格都可由最终用户编辑，例如，单元格[ex1][item1]可以从100更改为150，这将导致一个事件，该事件将该行的总计从320更新为370

最初我在HTML文件中定义主模板

<div class="container" id="app">

    <script type="text/x-template" id="datagrid-template">
        <table class="table-striped">
            <thead>
                <headerrow v-bind:columns="columns"></headerrow>
            </thead>

            <tbody>
            <datarow v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></datarow>
            </tbody>
        </table>
    </script>

    <div class="row">
        <div class="col-sm-10">
            <datagrid v-bind:columns="columns" v-bind:data="rows"></datagrid>
        </div>
        <div class="col-sm-2">
            <div class="row">
                <button type="button" v-on:click="addColumn()">Add Column</button>
            </div>
            <div class="row">
                <button type="button" v-on:click="addRow()">Add Row</button>
            </div>
        </div>
    </div>
</div>

然后，我有6种主要的不同组件类型：

• 数据输入（通用输入单元）
• dataheader（扩展datainput）
• 数据单元（扩展数据输入）
• baserow（表中的行）
• headerrow（扩展基线，由DataHeader组成）
• datarow（扩展baserow，由数据单元组成）

我添加一行，并将单元格按此方式通过

基线

var baseRow = {
  render: function(createElement) {
    return createElement('tr', {}, this.getProps(createElement));
  },
  props: {...}
  }
};

Vue.component('headerrow', {
  mixins: [baseRow],
  methods: {
    getProps: function(createElement) {
      var comps = [];
      this.$options.propsData.columns.forEach(function(el) {
        comps.push(createElement('dataheader', {
          props: {...}
        }));
      });
      return comps;
    }
  }
});

headerrow

var baseRow = {
  render: function(createElement) {
    return createElement('tr', {}, this.getProps(createElement));
  },
  props: {...}
  }
};

Vue.component('headerrow', {
  mixins: [baseRow],
  methods: {
    getProps: function(createElement) {
      var comps = [];
      this.$options.propsData.columns.forEach(function(el) {
        comps.push(createElement('dataheader', {
          props: {...}
        }));
      });
      return comps;
    }
  }
});

当我单击add column（添加列）时，我可以看到在使用chrome扩展查看

时，“测试”被添加到columns（列）属性中。此外，我看到“test”被添加到

columns prop中，但UI中没有实际生成任何内容。我假设这是我最初渲染行和列的结果，我只是有一些基本的误解。。。有没有人能提供一些方向，告诉我哪里出了问题

---

在

中，除了

之外，您不能使用任何东西。您可以使用Vue指令

is

在此处添加其他组件：

<tbody>
    <tr is="datarow" v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></tr>
</tbody>

所以这是一个根本性的误解。要做到这一点，数据必须与道具一起使用。最初，这些值必须作为道具附加，然后道具应分配给数据值。下面的示例强调了我试图做的事情

var baseRow = {
  render: function(createElement) {
    return createElement('tr', this.createCells(createElement));
  },
  props: {
    initColumns: {
      type: Array,
      default: []
    },
    initData: {
      type: Object,
      default: null
    }
  },
  data: function() {
    return {
      columns: this.initColumns,
      data: this.initData
    }
  }
};

然后，要添加元素，可以从主Vue对象（包含行组件）调用类似于
this.columns.push（{value:'test'}）的东西。这将更新columns数据属性，还将更新UI

根据我的理解，这是由于props具有，而data属性是被动的，这在中不被使用。
我欣赏这个响应，但datarow是tr。看看我问题的baserow部分，我通过createElement（'tr'，{}，this.getProps（createElement））；。datarow是Vue解析并构建模板后的
。DOM抛出
中的任何东西，这些东西在
发生之前都不是
。同样的问题也会出现在
内部的
中。您指的是这个吗？听起来好像里面的模板不受此限制。此外，将其更改为tr、td、th似乎并不奏效。问题仍然是，从未生成并添加到。啊，我明白了。我不知道这是避免使用脚本标签。不过，谢谢你的建议，你有什么想法，为什么元素从来没有添加到我上一个屏幕截图中显示的树中？您可以看到它被添加到数据对象，然后添加到prop对象，但它从未在UI中呈现。