Hola, estaba tratando de usar un modelo v como entrada para un valor en el objeto en una matriz de objetos en Vue 3. La complejidad radica en el hecho de que una función procesa primero el objeto. Y que debe procesarse cada vez que se realiza un cambio en una entrada. Aquí está mi código (y un enlace de sandbox):
<template> <div id="app"> <div v-for="param in process(parameters)" :key="param"> Name : {{param.name}} Value : <input v-model="param.value"> </div> {{parameters}} </div> </template> <script> export default { name: "App", data(){ return{ parameters :[ {'name':'Richard Stallman','value':'cool dude'}, {'name':'Linus Torvalds','value':'very cool dude'}, {'name':'Dennis Ritchie','value':'very very cool dude'} ] } }, methods:{ process(parameters){ const results = parameters.map( param =>{ return {name:param.name+' extra text', value:param.value+' extra text', } }) return results } } }; </script>No estoy completamente seguro de haber entendido si la persona debería poder ver/editar el texto que agregó dentro de su método de procesamiento.
De todos modos, creo que esta muestra de código debería resolver su problema:
<template> <div id="app"> <div v-for="param in parameters" :key="param.name"> Name : {{ param.name }} Value : <input v-model="param.value" /> </div> {{ process }} </div> </template> <script> export default { name: "App", data() { return { parameters: [ { name: "Richard Stallman", value: "cool dude" }, { name: "Linus Torvalds", value: "very cool dude" }, { name: "Dennis Ritchie", value: "very very cool dude" }, ], }; }, computed: { process: function() { const results = this.parameters.map((param) => { return { name: param.name + " extra text", value: param.value + " extra text", }; }); return results; }, }, }; </script>Entonces, estamos iterando a través de la matriz de parámetros directamente, agregando una entrada en el valor tal como lo hizo. Cuando ingresa la entrada, actualiza el parámetro vinculado a ella, en vivo.
Acabo de cambiar el método que hiciste a un método computado. De esta manera, cada vez que se actualizan los parámetros, también se actualiza el "proceso" porque depende de él directamente.
También eliminé el paso del argumento "parámetros", está en los datos del componente, solo puede acceder a él directamente.
De esta manera, al usar "proceso" como cualquier variable, siempre tendrá los parámetros actualizados + lo que agregó a ellos.
Utilice la propiedad computed para obtener el estado reactivo de los datos.
Demostración de trabajo:
new Vue({ el: '#app', data: { parameters :[ {'name':'Richard Stallman','value':'cool dude'}, {'name':'Linus Torvalds','value':'very cool dude'}, {'name':'Dennis Ritchie','value':'very very cool dude'} ] }, computed: { process() { const results = this.parameters.map((param) => { return { name: param.name + ' extra text', value: param.value + ' extra text' } }); return results; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="param in process" :key="param"> Name : {{param.name}} Value : <input v-model="param.value"> </div><br> <strong>Orinigal Data :</strong> {{parameters}} </div>