Estoy enfrentando algunos problemas con el enlace de datos bidireccional en propiedades de objetos anidados profundos usando vue v 3.0.5. Mi api devuelve un json que luego guardo de esta manera exacta en los data de mi instancia de vue:
{ ... "ratings": [ { "id": 3, "text": "This is some text", "rating": { "plot": 3, "character development": 7, "cinematography": 5 }, "createdAt": "2022-02-01T17:23:48.032Z", "updatedAt": "2022-02-19T09:51:18.254Z", "publishedAt": "2022-02-01T17:24:12.878Z" },... ] } Ahora tengo una sección en mi plantilla que representa la calificación, pasa los valores a un componente, que luego muestra el valor en una escala del 1 al 10. Ahora estoy buscando una manera de vincular estos valores individuales en la rating , digamos plot una entrada de rango en mi plantilla, que se parece a esto:
<template v-for="(value, component) in movie.ratings[0].rating"> <div class="rating__label">{{ component }} {{value}}</div> <input type="range" min="0" max="10" v-bind="value"> </template> con la esperanza de que, en teoría, debería vincular los valores del engine y la rating interna de la gearbox de cambios al control deslizante, de modo que cuando actualice muevo el control deslizante, el valor dentro de las ratings.rating se actualiza. Sin embargo, no he encontrado ninguna solución a esto.
¿Puede alguien señalarme en la dirección correcta aquí? Tal vez más específicamente, ¿cómo usar v-bind aquí correctamente, para que funcione el enlace? ¿Es posible la unión a propiedades profundamente anidadas?
Saludos cordiales derelektrischemoench
Si lo entendí correctamente, tal vez algo como el siguiente fragmento: (puede crear un método para cambiar el rango de entrada y pasar el valor, el índice de calificaciones y el nombre de la propiedad, para que pueda usarlo de esta manera para cualquier calificación)
const app = Vue.createApp({ data() { return { movie: { title: 'Some Movie', ratings: [{"id": 3, "text": "This is some text", "rating": {"plot": 3, "character development": 7, "cinematography": 5}, "createdAt": "2022-02-01T17:23:48.032Z", "updatedAt": "2022-02-19T09:51:18.254Z", "publishedAt": "2022-02-01T17:24:12.878Z"},{"id": 4, "text": "This is some text", "rating": {"plot": 4, "character development": 8, "cinematography": 6}, "createdAt": "2022-02-01T17:23:48.032Z", "updatedAt": "2022-02-19T09:51:18.254Z", "publishedAt": "2022-02-01T17:24:12.878Z"}] } }; }, methods: { changeVal(val, idx, field) { this.movie.ratings[idx].rating[field] = val } }, }) app.mount('#demo') <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <h5>{{ movie.title }} - ratings</h5> <div v-for="(i, idx) in movie.ratings.length" :key="idx"> <div v-for="(value, component) in movie.ratings[idx].rating" :key="component"> <div class="rating__label">{{ component }} {{ value }}</div> <input type="range" min="0" max="10" :value="value" @input="changeVal($event.target.value, idx, component)"> </div> <hr> </div> </div>