Vue - 發出數據 object 但更改一個數據會改變它們

Question

我有一個 TODO 應用程序，想通過道具從一個組件傳遞到另一個對象數組。 每次單擊按鈕時都會添加一個 object 但我遇到了問題。 問題是添加到數組中的每個 object 的屬性值都相同。 似乎沒有正確保存每個tareas.tarea數據。

應用程序.vue

<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 || 這里是我展示 ToDo 的地方

<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 對象通過引用傳遞（不是按值克隆）。 每次您從AgregarTarea.vue中$emit tareas object 時，它與以前的 object 引用相同，即使屬性已更改。 因此， App.vue 中 tareas tareas中的所有對象都是相同的 object。

要解決此問題，請將 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每次都會創建一個全新的 object，因此您不必擔心克隆任何內容，即使tareas是一個復雜的嵌套 object，它也可以工作。