在 v-for 的所有输入中动态显示文本输入

Question

我有这段代码：

 <post v-for="post in posts" :post="post" :key="post.id">
      <template v-slot:publishComment>
        <v-text-field v-model="message"></v-text-field>
        <v-btn color="green" type="submit" v-on:click.prevent="publishComment(post.id, message)">Go!</v-btn>
      </template> 
 </post>

使用此代码，当我在输入中写入文本时，我看到相同的文本动态显示在所有输入中（由 v-for 创建），尽管当我单击 Go! 时，只发送了正确的文本。所以问题是如何让输入的文本只出现在正确的输入中。我想过使用条件 v-if 和焦点输入，但我没有设法实现它。

Answer 1

这是因为所有输入都具有与 v-model 相同的变量 (message )。创建消息数组或将其添加到 post，如 post. message.

Answer 2

一个观察： 当您动态创建输入时，每个输入的 v-model 应该不同。在您的示例代码中，您将相同的 message 绑定到每个输入 v-model，每个输入应该不同。

工作演示：

const app = new Vue({
  el: '#app',
  data() {
    return {
      posts: [{
        id: 1,
        message: ''
      }, {
        id: 2,
        message: ''
      }, {
        id: 3,
        message: ''
      }]
    }
  },
  methods: {
    publishComment(id, message) {
        console.log('Id : ', id);
      console.log('Message : ', message);
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <div v-for="post in posts" :post="post" :key="post.id">
    <v-text-field v-model="post.message"></v-text-field>
    <v-btn color="green" type="submit" v-on:click.prevent="publishComment(post.id, post.message)">Go!</v-btn>
  </div>
</div>

在 v-for 的所有输入中动态显示文本输入

Text input displayed dynamically in all the inputs in v-for

vue.js

v-for