表单提交后，Vue反应性保持不变

Question

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

HTML

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

AddForm.vue

<template>
  <div>
    <h2>
        Add new item
    </h2>
    <form method="post" @submit.prevent="formSubmit">
        <div>
            <input type="text" placeholder="Title" v-model="title">
        </div>
        <div>
            <label for="">Status</label>
            <input type="checkbox" v-model="status">
        </div>
        <div>
            <input type="submit" value="Save">
        </div>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            title: '',
            status: false,
        }
    },
    methods: {
        formSubmit(event) {
            axios.post('/add-item', this.$data)
              .then((response) => {
                  this.$eventBus.$emit('newitem', this.$data)
              })
            // this.title = '';
            event.target.reset();
        },
    }
  }
</script>

Bucketlist.vue

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

我尝试过this.title = ''，但是提交请求时出现错误Column 'title' cannot be null。

这不是添加新项目并保持Vue反应性的正确方法吗？

我制作了一个小（而且很烂）的GIF来说明我的问题。

Answer 1

问题在于您要将整个 $ data对象传递给事件。

为什么这是个问题？

引自here。

  

被赋予非原始值的变量将获得对该值的引用。该参考指向对象在内存中的位置。变量实际上不包含值。

解决问题

const arr = [];

const obj = { title: 'a title!' };

arr.push(obj);
console.log(arr) // 0: {title: "a title!"}

obj.title = 'a modified title!';
console.log(arr) // 0: {title: "a modified title!"}

解决方案

创建shallow copy

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

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

请注意，如果您的对象具有嵌套对象（或任何不是原始值），则浅表复制方法将不起作用，因为您还需要照顾那些嵌套对象。

Answer 2

为什么已发送的商品仍被突变？

您正在发出整个$data对象……正如您在图像下面看到的那样，$data对象包括一堆直接与内存中的数据变量相关的函数（{ {1}} / setters）。

因此，当您将该对象传递给其他组件时...。输入中的getters仍会投标到内存中的数据，因此它仍然可以v-model或set。

解决方案：

与其传递整个get对象，不如传递一个包含要推入该数组的数据的文字对象，如：

$data