[英]Dynamically adding elements in vue.js
tl;dr : I am generating a table with editable cells similar to the one pictured below. tl;博士:我正在生成一个包含可编辑单元格的表格,类似于下图。 I have it so the cells are editable and the total updates, but I am struggling to figure out the process I need to follow to actually add new rows and columns.
我有它,所以单元格是可编辑的并且总更新,但我正在努力找出我需要遵循的过程来实际添加新的行和列。
All of the cells with the exception of total are editable by the end user, for example cell[ex1][item1] can be changed from 100 to 150, which then causes an event that will update that total for that row from 320 to 370.除总计之外的所有单元格都可由最终用户编辑,例如,单元格[ex1][item1] 可以从 100 更改为 150,然后会引发一个事件,将该行的总计从 320 更新为 370 .
Initially I define the main template in the HTML file...最初我在 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>
In the JS file I init the main Vue element as such...在 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'});
}
}
});
I then have 6 main different component types:然后我有 6 种主要的不同组件类型:
I add a row and the cells through as such我这样添加一行和单元格
baserow基行
var baseRow = {
render: function(createElement) {
return createElement('tr', {}, this.getProps(createElement));
},
props: {...}
}
};
headerrow标题行
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;
}
}
});
When I click add column I can see the 'test' get added to the columns prop when viewing the <datagrid>
using the chrome extension.当我单击添加列时,我可以在使用 chrome 扩展查看
<datagrid>
时看到“测试”被添加到列道具中。 Additionally, I see the 'test' get added to the <headerrow>
columns prop, but nothing in the UI is ever actually generated.此外,我看到“测试”被添加到
<headerrow>
列属性中,但 UI 中实际上没有生成任何内容。 I am assuming that this is a result of how I initially render the rows and columns, and that I am just having some sort of fundamental misunderstanding... Could anyone provide some direction as to far as what and where I go wrong?我假设这是我最初如何渲染行和列的结果,并且我只是有某种基本的误解......谁能提供一些关于我出错的地方和地方的方向?
So it was a fundamental misunderstanding.所以这是一个根本性的误解。 To accomplish this the data must be used in conjunction with the props.
要做到这一点,数据必须与道具一起使用。 Initially the values must be attached as a prop and then the prop should then be assigned to a data value.
最初,这些值必须作为道具附加,然后应该将道具分配给数据值。 The following example highlights what I was trying to do.
以下示例突出显示了我正在尝试做的事情。
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
}
}
};
Then to add an element, from the main Vue object (that contains the row component) you can call something similar to this.columns.push({value: 'test'});
然后添加一个元素,从主 Vue 对象(包含行组件)中,您可以调用类似于
this.columns.push({value: 'test'});
. . This will update the columns data attribute and will also update the UI.
这将更新列数据属性,还将更新 UI。
From my understanding this is a result of the props having aone-way data flow , while the data property is reactive, which is disucessed in this section of the docs .据我了解,这是 props 具有单向数据流的结果,而 data 属性是反应性的,这在文档的本节中被取消。
You can't use anything other than a <tr>
within a <tbody>
.您不能在
<tbody>
中使用除<tr>
以外的任何内容。 You can use the Vue directive is
to add other components there:您可以使用 Vue 指令
is
其中添加其他组件:
<tbody>
<tr is="datarow" v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></tr>
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.