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

我真的在为如何实现一个与“Vue哲学”相一致的模式而苦苦挣扎

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

下面是一个工作示例：它使用一个方法（updateRecord）将表单输入（绑定到editRecord）复制到引用的li的数据绑定（messages[index]）

---

寻找关于如何更好地实现此模式的见解。谢谢

按照惯例，在这种情况下，您实际上不需要任何方法。您可以直接在模板中设置

editRecord

。此外，如果将

editRecord

设置为所选的

消息

，则您甚至不需要更新按钮或跟踪索引

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>

{{message.name}
{{message.message}


名称
消息

这是您的最新信息

结果利用了Vue的反应性，当您在表单中编辑时，也可以看到列表中发生的更改

不过，有些人可能会喜欢您所采取的方法，他们所做的编辑只有在指定完成后才能完成。这在很大程度上取决于品味

---

但是，我要警告您不要使用

索引
来跟踪您选择的记录。如果列表在您下面更改，则索引也会更改。在
消息上使用
id
属性。不过，如果你采用反应式方法，你并不真正需要它。
习惯地说，在这种情况下，你并不真正需要任何方法。您可以直接在模板中设置
editRecord
。此外，如果将
editRecord
设置为所选的
消息
，则您甚至不需要更新按钮或跟踪索引

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>




{{message.name}
{{message.message}


名称
消息

这是您的最新信息

结果利用了Vue的反应性，当您在表单中编辑时，也可以看到列表中发生的更改

不过，有些人可能会喜欢您所采取的方法，他们所做的编辑只有在指定完成后才能完成。这在很大程度上取决于品味

但是，我要警告您不要使用
索引
来跟踪您选择的记录。如果列表在您下面更改，则索引也会更改。在
消息上使用
id
属性。不过，如果您采用反应式方法，您并不真正需要它。
首先，谢谢您。这看起来很简单，也很令人兴奋。我可能是想得太多了。真正新奇有趣的是如何在editRecord和消息之间建立“链接”。仅从您的简单示例中，我就学到了很多关于Vue的知识。@monopineu这主要是学习从数据驱动的方法进行思考，或者思考如何根据给定的状态呈现UI，而不是强制执行操作。首先，谢谢您。这看起来很简单，也很令人兴奋。我可能是想得太多了。真正新奇有趣的是如何在editRecord和消息之间建立“链接”。我从您的简单示例中学到了很多关于Vue的知识。@monopineu主要是学习从数据驱动的方法进行思考，或者思考如何根据给定的状态呈现UI，而不是强制执行操作。