vue.js

Question

我迷失了 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) {
            // ????????
        }
    }
});

有人可以帮忙吗？提前谢谢你

Answer 1

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

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

那么您所要做的就是 splice() 将新对象放入该行的 _children 数组中。

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) 
    }
}

vue.js - 如何更新 JSON？

vue.js - how to update JSON?

javascript

data-binding

jquery

json