Обновить данные в массиве, не отображая в DOM

Question

При попытке обновить данные в массиве из модального поля. Данные не обновляются в списке dom v-for.

Следующее состоит из модальности и деталей. Данные вводятся в модальное поле, которое обновляет данные в деталях. Cdata - это массив, который обновляется в процессе. Когда данные вводятся в модальное поле. Эти данные помещаются в cdata. Который должен обновить детали цикла v-for, но это скорее не происходит. Я пытался обновить, слушая через события, но по-прежнему нет никаких эффектов.

data.vue

 export default {
      props: ["c-data"],
      data: function() {
        return {};
      },
      mounted: function() {},
      methods: {}
    }; 

    <template>
       <button type="button" class="btn btn-primary"   data-toggle="modal" data-target="#aModal">Add  </button>
       <data-detail :cdata="cData"></data-detail>
       <add-modal  :cdata="cData"></add-modal>
    </template>

Ниже приведен код для модального добавления, который обновляет данные в массиве cData, то есть данные, введенные в модальный режим данных.

надстройка modal.vue

  export default {
      props: ["c-data"],
      data: function() {
        return {
          cName: "",
          cEmail: ""
        };
      },
      mounted() {
        console.log(this.cData);
      },
      methods: {
        addC() {
          this.cData.push({ cName: this.cName, cEmail: this.cEmail });
    
          console.log(this.cData);
          this.$root.$emit("cEvent", this.cData);
        }
      }
    };

<template  id="add-modal">
   <div class="modal fade" id="aModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-large" role="document">
   <div class="modal-content">
   <div class="modal-body">
      <div class="box">
         <div class="row">
            <div class="form-group col-sm-6 col-lg-6 col-xl-4">
               <div class="input-section">
                  <input type="text" name="cName" class="form-control" id="c-name" v-model="cName" placeholder="Enter   name" value="" required>
                  <label for="c-name"> Name*</label>
               </div>
            </div>
            <div class="form-group col-sm-6 col-lg-6 col-xl-4">
               <div class="input-section">
                  <input type="text" v-model="cEmail" name="cEmail" class="form-control" id="c-email" placeholder="Enter   email" required>
                  <label for="c-email">  Email*</label>
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
               <button type="button" @click="addC" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</template>

Следующее состоит из списка v-для, который должен быть обновлен, но не обновляется.

    export default {
      props: ["c-data"],
      data: function() {
        return {};
      },
      mounted() {
        console.log(this.cData);
      },
      methods: {}
    };
     

    <div  v-for="(item, i) in cData"  :key="item.id">
          {{item.name}}
    </div>

Я пытался обновить его с помощью событий прослушивания, но безрезультатно, поскольку cData уже был обновлен в компоненте данных.

Answer 1

Вы никогда не должны напрямую манипулировать данными, которые передаются как свойство.

Использование событий было правильным способом, вам просто нужно удалить новые данные из объекта свойств.

Используйте

this.$emit("cEvent", { name: this.cName, email: this.cEmail } );

И слушайте его в родительском компоненте

<add-modal :cdata="cData" @cEvent="handleNewData"></add-modal>

...

handleNewData(d) {
  this.cData.push(d);
}

Ваш cData объект должен управляться непосредственно фактическим владельцем этих данных, т. Е. Родителем, из которого происходит объект cData, а не в любом компоненте, в который вы передаете его как свойство.

Полный рабочий пример, который вы можете использовать в качестве справочного: https://codesandbox.io/s/n4lk7rmxx4