0
227
Vistas¿Cómo vincular la función en vue js v-model?
Hice una pregunta que podría ser poco clara para alguien. Entonces, eliminé esa pregunta y volví a preguntar con un nuevo enfoque. Tengo una respuesta API algo como esto:
{ id: 2, name: 'Item 1', items: [ { slug: 'Phase 1', values: [ { highValue: '12', lowValue: '8', color: 'red' }, { highValue: '15', lowValue: '5', color: 'green' } ] }, { slug: 'Phase 2', values: [ { highValue: '14', lowValue: '6', color: 'red' }, { highValue: '15', lowValue: '5', color: 'green' } ] } ] }, { id: 3, name: 'Item 2', items: [ { slug: 'CBC', values: [ { highValue: '10', lowValue: '7', color: 'green' }, { highValue: '12', lowValue: '3', color: 'red' } ] } ] } Tengo un bloque estático para High Value , Low Value , Red & Green en mi HTML. Entonces, para esos bloques estáticos, necesito elegir el valor apropiado de la respuesta. Por ejemplo, para el bloque High Value & Red , necesito elegir highValue de la respuesta cuando color: 'red' . Entonces, escribo cuatro funciones, por ejemplo:
redHigh (item) { const res = item.filter(obj => { return obj.color === 'red' }) return res[0].highValue } Ahora, traté de vincular la función en v-model esta manera:
<v-text-field outlined :v-model="redHigh(sub.values)" placeholder="High" ></v-text-field> Pero, eso no estaba funcionando. Si escribiera :value en lugar de :v-model , eso funcionaría. Pero, en ese caso, no obtengo el valor modificado después de hacer clic en el botón save .
save (formIndex) { console.log(this.items[formIndex]) } 
¿Cómo resolver eso?
1 Respuestas
Responde la pregunta0
v-model no es para una función; es para la propiedad de datos de Vue.
Sin embargo, entiendo el requisito de su aplicación.
Solo necesita crear propiedades computadas de Vue, que pueden generar una matriz dinámica utilizando un evento de entrada de enlace de función personalizada desde su campo de texto
puede leer la documentación de $emit o v-bind al respecto
Acabo de leer la API del componente v-text-field aquí https://vuetifyjs.com/en/api/v-text-field/#props .
Solo necesita actualizarlo para usar la propiedad de value y el evento de change de enlace 
cual seria asi
<div v-for="(sub, index) in item.items" :key="sub.slug"> <v-text-field outlined :value="redHigh(sub.values)" @change="updateSubValue(index, 'red', 'high')" placeholder="High" ></v-text-field> updateSubValue(index, color, value) { // find current sub by index // find current value's key by color and value // update vue data }Podría indexarse primero, hace mucho tiempo que no desarrollo la aplicación Vue
<div v-for="(index, sub) in item.items" :key="sub.slug">O puede encontrar el sub actual por slug, no es necesario agregar índice