javascript - 在 vue.js 中动态添加元素

Question

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>

在 JS 文件中，我初始化了主要的 Vue 元素......

var app = new Vue({
  el: "#app",
  data: {
    categories: [...],
    companies: [...]
  },
  methods: {
    addRow: function() {
      console.log(this.$children[0]);
    },
    addColumn: function() {
      this.$children[0].columns.push({value: 'test'});
    }
  }
});

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

• datainput(通用输入单元格)
• 数据头(扩展数据输入)
• 数据单元(扩展数据输入)
• baserow(表格中的行)
• headerrow(扩展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;
    }
  }
});

当我单击添加列时，在查看 <datagrid> 时，我可以看到“测试”已添加到列属性中使用 Chrome 扩展。此外，我看到“测试”被添加到 <headerrow> columns 属性，但 UI 中的任何内容都不会实际生成。我假设这是我最初呈现行和列的方式的结果，并且我只是有某种基本的误解......任何人都可以提供一些关于我出错的地方和地方的方向吗？

Answer 1

所以这是一个根本性的误解。为此，数据必须与 Prop 结合使用。最初，值必须作为 prop 附加，然后应该将 prop 分配给数据值。以下示例突出显示了我正在尝试做的事情。

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'}); 的方法。这将更新列数据属性，还将更新 UI。

根据我的理解，这是 Prop 具有 one-way data flow 的结果，而数据属性是 react 性的，这在 this section of the docs 中进行了讨论.