Vue.js 表格提交后，Vue反应性保持不变

我正在学习Vue.js，正在构建bucketlist应用程序。我遇到的问题是，当我添加一个新项目时，我的输入会被清除，但当我开始添加一个新项目时，上一个项目也会被更新

HTML

<div class="container">
  <add-form></add-form>
  <bucketlist></bucketlist>
</div>

问题在于，您正在将整个数据对象传递给事件

为什么这是一个问题？
引自

分配了非原语值的变量将引用该值。该引用指向对象在内存中的位置。这些变量实际上并不包含该值

解决问题
const arr=[]；
const obj={title:'a title！'}；
方位推力（obj）；
console.log（arr）//0:{title:“一个标题！”}
obj.title='a modified title！'；
console.log（arr）//0:{title:“修改过的标题！”}

解决方案
创建一个

按照上面的例子，我们可以这样做：

arr.push({ ...obj });

请注意，如果您的对象有嵌套对象（或任何不是primitve值的对象），浅层复制方法将不起作用，因为您还需要处理这些嵌套对象。
为什么发送的项目仍在变化？
您正在发射整个
$data
对象。。。如下图所示，
$data
对象包含一系列与内存中的数据变量直接相关的函数（
setters
/
getters
）


所以当你把这个对象传递给另一个组件时您输入的
v-model
仍然被绑定到内存中的数据，因此它仍然可以
设置
或
获取它

解决方案：

不要传递整个
$data
对象，只需传递一个包含要推入该数组的数据的文本对象，如下所示：

formSubmit（事件）{
var obj={
标题：这个，
状态：这是状态
};
axios.post（'/additem'，this.$data）
。然后（（响应）=>{
此.$eventBus.$emit（'newitem'，obj）
})
event.target.reset（）；
}
从逻辑角度看，您的示例与非常常见的Todo MVC“app”非常相似，当然有一个vue.js的实现，例如，看看这里，看看为它实现的模式类型：
<template>
  <div class="bucketlist">
    <div v-for="bucket in bucketlist" class="bucketitem">
        <h3>
            {{ bucket.title }}
        </h3>
        <input type="checkbox" :id="bucket.id"
                     :checked="bucket.status ? true : false"
                     @click="updateStatus">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            bucketlist: []
        }
    },
    methods: {
        updateStatus(value) {
            axios.post('/update-status/'+value.target.id, this.$data);
        }
    },
    mounted() {
        axios.get('/bucketlist')
            .then(response => (this.bucketlist = response.data.bucketlist));

        this.$eventBus.$on('newitem', (data) => {
            this.bucketlist.push(data);
        });
    }
  }
</script>

arr.push({ ...obj });