Estoy luchando con algo que pensé que primero sería fácil de resolver.
Imagine una página cargando con múltiples áreas de texto como:
<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> Cuando se ejecuta el ciclo v-for , obtengo una gran cantidad de datos item.paragraph y item.title y me gustaría guardarlos en una matriz.
Problema 1: no sé cómo precargar {{item.paragraph}} en un área de texto. Parece que :value="" no se acepta. y también probé este <textarea>{{item.paragraph}}</textarea> pero no tuve suerte (no esperaba este comportamiento).
Problema 2: ¿Cómo puedo guardar en mi v-for {item.title}} y {{item.paragraph}} en una nueva matriz (pero agruparlos).
¿Alguna idea, por favor?
¡Gracias!
Intente usar solo v-model (es el atajo de :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>