时间戳

首页 > 解决方案 > 更新数组中的数据不在 DOM 中呈现

javascript - 更新数组中的数据不在 DOM 中呈现

问题描述

尝试从模式框中更新数组中的数据。dom v-for 列表中的数据未更新。

以下由模态和细节组成。数据被输入到模式框中，该模式框会详细更新数据。cdata 是一个在整个过程中更新的数组。在模态框中输入数据时。此数据被推送到 cdata 中。这应该更新详细信息 v-for 循环，但它并没有发生。我尝试通过监听事件进行更新，但仍然没有效果。

数据.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-for 列表。

    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 已经在数据组件中更新了。

标签： javascriptlaravel-5vuejs2

解决方案

您永远不应该直接操作作为属性传入的数据。

使用事件是正确的方法，您只需将新添加的数据与属性对象分离。

利用

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

推荐阅读