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数组中的数据，该数据是在数据模式中输入的数据。

add-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对象所源自的父对象）直接操作，而不能在将其作为属性传入的任何组件中操作。 / p>

可以用作参考的完整示例：https://codesandbox.io/s/n4lk7rmxx4

更新未在DOM中呈现的数组中的数据

1 个答案: