vue.js-如何更新JSON

vue.js - how to update JSON?

本文关键字：更新 JSON js- 何更新 vue      更新时间：2023-09-26

我失去了vue.js的基础：/我想在点击按钮后在html中添加新列，但我无法访问json中的特定位置。

<div id="app">
    <div class="container">
        <div class="row" v-for="row in json._children">
            <div class="col-xs-{{ col.size }}" v-for="col in row._children">
                <div v-for="module in col._children">
                    {{module.moduleType}}
                </div>
                <button v-on:click="addModule(col, $event)">Add</button>
            </div>
        </div>
    </div>
</div>

JS-

new Vue({
    el: '#app',
    data: {
        json: {
            'type': 'panel',
            '_children': [
                { 'type': 'row', '_children': [ { 'type': 'col', 'size': '2' }, { 'type': 'col', 'size': '10', '_children': [{ 'type': 'module', 'moduleType': 'HTML' }] } ] },
                { 'type': 'row', '_children': [ { 'type': 'col', 'size': '5' }, { 'type': 'col', 'size': '7' } ] }
            ]
        }
    },
    methods: {
        addModule: function(currentColumn, e) {
            // ????????
        }
    }
});

有人能帮忙吗？提前感谢

如果要向行添加列，则应将该行传递给addModule()。不是吗？此外，我通过$index来知道在哪个位置插入新列：

<button v-on:click="addModule(row, $index, $event)">Add</button>

那么您所要做的就是将新对象CCD_ 3放入行的CCD_。

methods: {
    addModule: function(row, colIndex, e) {
        var newCol = { type: 'col', size: 1 }
        row._children.splice(colIndex, 0, newCol)
        //or to insert to the right:
        row._children.splice(colIndex + 1, 0, newCol) 
    }
}
相关文章：