Question

我想知道如何使用v-for创建不同的输入值。在这个例子中，假设我有来自不同用户的一些推文，每个推文都有自己的回复字段。如何将输入值视为单独的实体？

在这个小提琴中，您可以看到输入值绑定到其他输入值。如何在没有当前绑定副作用的情况下将所选字段的值传递给reply方法？谢谢。

JS小提琴： https://jsfiddle.net/n2fole00/n60d4qos/

HTML

<div id="app" style="margin:10px;">

  <div v-for="(tweet, key) in tweets">
    <p><strong>{{ tweet.user }} wrote...</strong></p>
    <p>{{ tweet.text }}</p>
    <label v-bind:for="'reply-'+key">Reply: </label>
    <input v-bind:id="'reply-'+key" v-model="replies" type="text">
    <button v-on:click="reply(replies, tweet.user)">Reply</button>
    <hr>
  </div>

</div>

Vue的

new Vue({
  el: "#app",
  data: {
    replies: [],
    tweets: [
      { text: "Learn JavaScript", user: "Bob" },
      { text: "Learn Vue", user: "Alice"},
      { text: "Play around in JSFiddle", user: "John" },
    ]
  },

  methods: {
    reply(reply, user) {
      alert("You replied\n" + reply + "\nto " + user);
    },
  },
})

Answer 1

在一个更大的/生产应用程序中，我可能会让每个用户字段都有自己的组件（或者两个，一个用于推文，一个用于回复，这两个都是由这个父级编排的）。

在这种情况下，您可以使用密钥作为回复的数组索引，并仅获取相关信息。请参阅更新的小提琴。

模板中的

：

<input v-bind:id="'reply-'+key" v-model="replies[key]" type="text">
<button v-on:click="reply(replies, tweet.user, key)">Reply</button>

方法中的

：

reply(reply, user, key) {
  alert("You replied\n" + reply[key] + "\nto " + user);
},

https://jsfiddle.net/n60d4qos/9/

如何处理使用v-for创建的不同输入值

1 个答案: