v-model / v-bind的事件驱动绑定/重新绑定？

Question

我真的在为如何实现符合“Vue 哲学”的模式而苦苦挣扎。

想象一下您要编辑的项目列表。有许多关于如何“内联”编辑这些项目的示例。但我想通过相同的、持久的表单来编辑我的项目。因此，当您单击列表项时，表单输入“重新绑定”到单击的列表项。

这是一个工作示例：http://jsbin.com/sopakid/3/edit?html,js,output 它使用方法 (updateRecord) 将表单输入（绑定到 editRecord）复制到引用的 li 的数据绑定（messages[index]）。

data: {
    messages: [
        { name: "Dale Cooper", message: "Black as midnight on a moonless night" },
        { name: "Shelly Johnson", message: "I've got one man too many in my life and I'm married to him." },
        { name: "Sheriff Truman", message: "Jelly donuts?"}
    ],
    editRecord: 
    { name: "", message: "" }
},

updateRecord: function(){
    var index = this.editRecord.index;
    this.messages[index].name = this.editRecord.name;
    this.messages[index].message = this.editRecord.message;
}

寻找有关如何更好地实施此模式的任何见解。谢谢！

Answer 1

按照惯用语，在这种情况下，您实际上并不需要任何方法。您可以直接在模板中设置editRecord。此外，如果您将editRecord 设置为选定的message，那么您甚至不需要更新按钮或跟踪索引。

var app = new Vue({

    el: '#app',

    data: {
        editRecord:{ name: null, message: null },
        messages: [
            { name: "Dale Cooper", message: "Black as midnight on a moonless night" },
            { name: "Shelly Johnson", message: "I've got one man too many in my life and I'm married to him." },
            { name: "Sheriff Truman", message: "Jelly donuts?"}
        ]
    }
});

这些是我对您的模板所做的更改

<div id="app">
  <div class="messages">
    <ul>
      <li class="message" v-for="(message, index) in messages" @click="editRecord = message">
        <div class="message__name">
        {{message.name}}
        </div>
        <div class="message__body">
        {{message.message}}
        </div>
      </li>
    </ul>
  </div>

  <div class="edit-form" v-if="editRecord">
    <label for="name">Name</label>
    <input name="name" type="text" placeholder="Name" v-model="editRecord.name">
    <label for="message">Message</label>
    <textarea name="message" id="" cols="30" rows="6" v-model="editRecord.message"></textarea>
  </div>
</div>

您的fiddle 已更新。

结果利用了 Vue 的 reactivity，当您在表单中进行编辑时，您也可以看到列表中发生的更改。

有些人可能喜欢您采用的方法，他们所做的编辑在他们指定之前是不完整的。很多都是口味问题。

但是，我会警告不要使用index 来跟踪您选择的记录。如果您下方的列表发生更改，则索引会更改。在您的messages 上使用id 属性。但是，如果您采用反应式方法，则实际上并不需要它。