vue.js - 不要使用 vue 组件内的输入字段更新数组值绑定
问题描述
在这里,我在组件内正确呈现数据。但是每当我更改需要绑定的数组中未更新的任何输入值时。我无法将值与rows
数组进行双向绑定。请帮忙。提前致谢。
Vue.component('refund-table', {
template: `
<div>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th v-for="column in columns"> {{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in rows">
<td >#{{index+1}}</td>
<td v-for="(item,ind) in row">
<input v-if="ind>0" :value="item">
<div v-else>{{item}}</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td><td></td><td style="text-align: right">Total</td><td>{{totalRefund}}</td>
</tr>
</tfoot>
</table>
</div>
</div>
`,
props: {
columns: Array,
rows: Array,
caption: String,
edit: Boolean,
},
data() {
return {}
},
mounted() {},
methods: {},
computed: {
totalRefund: function() {
return 100;
}
}
})
new Vue({
el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<refund-table id="app" :columns='["#Serial","a","b","c"]' :rows="[[1,2,3],[1,2,3],[1,2,3],[1,2,3]]" :footer='["a","b","c"]'></refund-table>
解决方案
在下面使用 v-model 来绑定新输入的数据并在计算中写入函数 updateArrayData ,因此每当有任何更改时,它将返回数组中新添加的值。
Vue.component('refund-table', {
template: `
<div>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th v-for="column in columns"> {{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in rows">
<td >#{{index+1}}</td>
<td v-for="(item,ind) in row">
<input @input="updateArrayData(row, index)" v-model="input_data" v-if="ind>0" :value="item">
<div v-else>{{item}}</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td><td></td><td style="text-align: right">Total</td><td>{{totalRefund}}</td>
</tr>
</tfoot>
</table>
</div>
</div>
`,
props: {
columns: Array,
rows: Array,
caption: String,
edit: Boolean,
},
data() {
return {
input_data:'' // Add the input_data variable in your data
}
},
mounted() {},
methods: {},
computed: {
totalRefund: function() {
return 100;
},
// Add the updateArrayData function in your computed here.
updateArrayData: function(row, index){
if(input_data){
return row[index] = this.input_data;
}
}
}
})
new Vue({
el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<refund-table id="app" :columns='["#Serial","a","b","c"]' :rows="[[1,2,3],[1,2,3],[1,2,3],[1,2,3]]" :footer='["a","b","c"]'></refund-table>
推荐阅读
- python - Python 3.x _tkinter.TclError:错误的窗口路径名“.!toplevel”
- oauth - Identity Server 4 是否允许通过外部 API 创建用户?
- php - 如何在 foreach 查询中插入第二个 foreach 查询?
- python - 分别对有状态和无状态 LSTM 网络以及 input_shape 感到完全困惑
- python - 从 .mat 文件创建 ndarray,但如何格式化 pandas 数据框?
- python - 如何在年龄计算器中加入闰年?
- function - Haskell:两次应用翻转(翻转类型)
- html - 从右到左浮动 HTML 和 CSS
- joomla - 致命错误:升级到 3.9 版本后在 Joomla 中找不到类“F0FTable”
- symfony - 如何删除渲染的多余字段组?