如何在v-for循环(vue)中预加载文本到文本区域?

Question

我正在努力解决一些我认为很容易解决的问题。

想象一个包含多个文本区域的页面加载为:

<div v-for="(item, index) in articles" class="bg-white shadow-lg sm:rounded-lg gap-3 mt-2" :key="index">
  <h1>{{item.title}}</h1>
  <textarea v-model="form5.fullArticle" :value="item.paragraph"  id="topicDescription" :rows="5" cols="80">
  </textarea>
</div>

当v-for循环运行时，我得到了大量的item.paragraph和item.title数据，并希望将它们保存到数组中。

问题1:我不知道如何将{{item.paragraph}}预加载到文本区域中。它看起来像:value="不被接受。我也试过这个<textarea>{{item.paragraph}}</textarea>，但没有运气(我没有预料到这种行为)。

问题2:我怎么能保存在我的v-for的{item.title}}和{{item.paragraph}}到一个新的数组(但组在一起)。

有什么想法吗?

谢谢!

Answer 1

尽量使用v-model(这是:value="text"的快捷方式)@input="event => text = event.target.value"):

const app = Vue.createApp({
  data() {
    return {
      articles: [{id: 1, title: "AAA", paragraph: "aaa"}, {id: 2, title: "BBB", paragraph: "bbb"},{id: 3, title: "CCC", paragraph: "ccc"}],
      newArray: []
    };
  },
  methods: {
    saveArt(item) {
      const found = this.newArray.find(a => a.id === item.id)
      if (!found) this.newArray.push(item)
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(item, index) in articles" class="bg-white shadow-lg sm:rounded-lg gap-3 mt-2" :key="index">
    <h5>{{item.title}}</h5>
    <textarea v-model="item.paragraph"  id="topicDescription" :rows="3" cols="30">
    </textarea>
    <button @click="saveArt(item)">Add</button>
  </div>
  <p>new array</p>
  {{ newArray }}
</div>