Question

我真的在努力实现一种符合＆＃34; Vue哲学的模式＆＃34;。

想象一下您要编辑的项目列表。有很多关于如何编辑这些项目的例子＆＃34; inline＆＃34;。但我想通过相同的持久形式编辑我的项目。因此，当您单击列表项时，表单输入＆＃34;重新绑定＆＃34;点击列表项。

这里有一个工作示例：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的反应性，当您在表单中进行编辑时，您也可以看到列表中发生的变化。

有些人可能喜欢你所采用的方法，他们所做的编辑只有在他们指定的情况下才能完成。很多这都是品味问题。

但我会警告不要使用index来跟踪您选择的记录。如果列表在您下面发生变化，则索引会发生变化。在id上使用messages媒体资源。如果你采用反应式方法，那么你真的不需要它。

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

1 个答案: