javascript - Vue - 发出一个数据对象但更改一个会改变它们

Question

我有一个 TODO 应用程序，想将 props 从一个组件传递到另一个组件数组。每次单击按钮时都会添加一个对象，但我遇到了问题。问题是添加到数组中的每个对象的属性值都相同。似乎每个 tareas.tarea 都没有正确保存数据。

应用程序

<template>
  <div>
    <Header></Header>
    <AgregarTarea @tareaAgregada="agregarTarea"></AgregarTarea>
    <div class="container">
      <div class="columns">
        <div class="column">
          <Lista :tareas = 'tareas' @eliminarItem="eliminarTarea"></Lista>
          <!-- here i pass through props the array of objects -->
        </div>
        <div class="column">  
          <TareaFinalizada></TareaFinalizada>
          {}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Header from './components/Header'
import AgregarTarea from './components/AgregarTarea'
import Lista from './components/Lista'
import TareaFinalizada from './components/TareaFinalizada'

export default {
  data(){
    return {
      tareas:[]
    }
  },
  components: {
    Header,
    AgregarTarea,
    Lista,
    TareaFinalizada
  },
  methods: {
    agregarTarea(data){
     //add new object to the array
      this.tareas.push(data)
    },
    eliminarTarea(data) {
      this.tareas.splice(data.id, 1);
    }
  }

};
</script>

AgregarTarea.vue ||这是我添加新 ToDo 的地方

<template>
    <div class="container">
        <input class="input" type="text" placeholder="Text input" v-model="tareas.tarea">
        <button class="button is-primary" @click="agregarTarea">Agregar Tarea</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            tareas: {
                tarea:'',
                id:null,
                editar:false
            }
        }
    },
    methods: {
        agregarTarea(){
            this.$emit('tareaAgregada', this.tareas)
            this.tareas.tarea = ' ';
        }
    }
}

</script>

Lista.vue ||这是我显示待办事项的地方

<template>
    <div>
        <div class="list is-hoverable">
            <ul>
                <li v-for="(tarea, index) in tareas" :key="index">
                    <a class="list-item has-text-centered" @click="editarTexto(index)">
                        {{ tarea }}
                        <div class="editar" v-if="editar">
                            <input class="input" type="text" placeholder="Text input" v-model="nuevaTarea">
                        </div>
                    </a>
                    <button class="button is-danger" @click="eliminarItem(index)">Eliminar</button>
                    <div><input type="checkbox"> Finalizada</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:['tareas'],
    data(){
        return {
            nuevaTarea: ' ',
            editar:false,
        }
    },
    methods: {
        eliminarItem(index){
            this.$emit('eliminarItem', index)
        },
        editarTexto(){
            this.editar = true
        }
    }
}
</script>

<style scoped>

</style>

Answer 1

JavaScript 对象通过引用传递(不是通过值克隆)。每次您$emit tareas来自 AgregarTarea.vue 的对象，它与之前的对象引用相同，即使属性已更改。因此，您 tareas 中的所有对象App.vue 中的数组是同一个对象。
要解决此问题，请将 AgregarTarea.vue 更改为 $emit每次克隆一个:

methods: {
    agregarTarea(){
        this.$emit('tareaAgregada', Object.assign({}, this.tareas)) // clone
        this.tareas.tarea = ' ';
    }
}

(这是一个浅克隆，如果 this.tareas 有嵌套对象，它就不能正常工作，但它没有。)

选项#2
这是一种适用于嵌套对象的不同方式:

new Vue({
  el: "#app",
  data(){
    return {
      tareas: null  // <-- It's not filled here
    }
  },
  methods: {
    resetTareas() { // <-- it's filled here instead
      this.tareas = {
        tarea:'',
        id:null,
        editar:false
      }
    },
    agregarTarea(){
      this.$emit('tareaAgregada', this.tareas);
      this.resetTareas(); // <-- Create a brand new object after emitting
    }
  },
  created() {
    this.resetTareas();  // <-- This is for the first one
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Tarea: <input type="text" v-model="tareas.tarea" /><br /><br />
  <button @click="agregarTarea">Emit</button><br /><br />
  Object: {{ tareas }}
</div>

自 resetTareas每次都创建一个全新的对象，你不必担心克隆任何东西，即使 tareas也能正常工作。是一个复杂的嵌套对象。