Question

因此，在我的一个VueJS模板中，我有一个左侧边栏，通过迭代（v-for）通过多维items数组生成按钮。

单击其中一个按钮时，将运行一个方法：

this.active.notes = item.notes

active.notes绑定到右侧内容部分的textarea。

因此，每次单击其中一个项目按钮时，您都会看到与该项目关联的（活动）注释。

我希望能够让用户编辑textarea中的活动备注。我在textarea上有一个AJAX调用，它会更新数据库。但问题是，items数据没有改变。因此，如果我单击其他项目，然后单击返回已编辑的项目，我会看到预编辑的注释。当我刷新页面时，当然，一切都完美排列。

更新项目数据的最佳方法是什么，以便始终与textarea编辑一致？我应该以某种方式重新加载项目数据（使用另一个AJAX调用数据库）？或者有更好的方法将模型绑定在一起吗？

这是JS：

export default {
    mounted () {
        this.loadItems();
    },

    data() {
        return {
            items: [],
            active: {
                notes: ''
            },
        }
    },

    methods: {

        loadItems() {

            axios.get('/api/items/'+this.id)
                    .then(resp => {
                        this.items = resp.data
                    })

        },

        saveNotes () {

           ...api call to save in db...

        },

        updateActive (item) {
            this.active.notes = item.notes;
        },
    }
}

Answer 1

我无法在您的数据对象中找到items属性。

数据对象中必须存在一个属性，以便Vue转换它并使其被激活

Vue不允许向已创建的实例动态添加新的根级反应属性

也许你可以看看这个：

Vue Reactivity in Depth

Answer 2

除非有某些东西没有显示，否则你的结构中似乎没有这样的东西。如果它不存在，则将其设置为空数组，这将在您的ajax调用中填充：

data() {
    return {
        active: {
            notes: ''
        },
        items: [],
},

现在，当ajax方法运行时，空数组items将通过以下行填充resp.data：（this.items = resp.data）。然后你应该能够使用v-for迭代你的items数组，你的updateActive方法应该按照你想要的方式工作。

Answer 3

使用PUSH

this.items.push(resp.data);

这是一个类似的问题 vue.js http get web api url render list

VueJS2：更新数据模式？

3 个答案: