Vue.js - 使用子组件更新或撤消模式

Question

我在从子组件更新正确对象时遇到问题。

我的设置如下： 一个 ul 列表，其中包含我想要呈现或编辑的大部分数据。 在“li”的一部分上，有一个子组件来显示那部分数据，这是一个连接到该对象的资源列表，并且还处理新资源的推送。

我还希望用户有一个按钮来启用行的编辑模式，然后是更新和取消按钮。

我面临的问题是找出我应该编辑然后保存的对象。我现在正在做的是尝试将行中的数据复制到 mutableRow 中，然后我将其用作输入控件的模型，而当用户不处于编辑模式时会显示实际的行数据。在更新方法中，我发布到数据库并更新了行对象。

ul
  li(v-for="row in rows")
    p(v-if="!row.editing") {{ row.name }}
    input(v-else, v-model="mutableRow.name")
    resources(:row="row")
    button(v-if="!row.editing") Start edit
    template(v-else)
      button Update
      button Cancel

这是正确的方法吗？如果是，我应该如何处理发送到我的子组件的道具？我尝试通过 this.$parent.mutableRow 获取 mutableRow，我尝试使用 v-if 切换“resource(:row="row")”，如果处于编辑模式，则发送 mutableRow，但随后我结束以某种方式从组件中更改两个对象。

我可以在这里使用另一种模式吗？

Answer 1

我认为您提到的“可变行”问题是通过传递rows[index] 而不是row 来解决的。无论如何，这就是使.sync 工作所需要的。

下面的示例实现了我在 cmets 中建议的内容：具有自己的数据副本和自己的编辑模式控件的单个组件。当您开始编辑时，道具数据被复制到本地数据中。当您单击更新时，将发出一个事件，并且父级（通过sync）将编辑后的数据复制到行中。如果单击取消，则不会发出任何事件，并且编辑结束。

new Vue({
  el: '#app',
  data: {
    rows: [{
      name: "Test",
      thingy: 4,
      resources: [{
        title: "Title",
        price: 5000
      }]
    }]
  },
  components: {
    rowEditor: {
      template: '#row-editor-t',
      props: ['row'],
      data() {
        return {
          editing: false,
          localRow: null
        };
      },
      methods: {
        startEditing() {
          this.editing = true;
          this.localRow = JSON.parse(JSON.stringify(this.row));
        },
        stopEditing() {
          this.editing = false;
        },
        update() {
          this.$emit('update:row', this.localRow);
          this.stopEditing();
        },
        cancel() {
          this.stopEditing();
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="row, index in rows" is="row-editor" :row.sync="rows[index]">
    </li>
  </ul>
</div>

<template id="row-editor-t">
  <li>
    <div v-if="editing">
      <input v-model="localRow.name">
      <div v-for="resource in localRow.resources">
        <input v-model="resource.title"><input v-model="resource.price">
      </div>
    </div>
    <div v-else>
      {{row.name}}
      <div v-for="resource in row.resources">
        {{resource.title}}: {{resource.price}}
      </div>
    </div>
    <div v-if="editing">
      <button type="button" @click="update">Update</button>
      <button type="button" @click="cancel">Cancel</button>
    </div>
    <button v-else @click="startEditing">Start edit</button>
  </li>
</template>

<!--
ul
  li(v-for=" row in rows ")
    p(v-if="!row.editing ") {{ row.name }}
    input(v-else, v-model="mutableRow.name ")
    resources(:row="row ")
    button(v-if="!row.editing ") Start edit
    template(v-else)
      button Update
      button Cancel
-->