¿Cómo configuro el valor predeterminado de un modelo si es parte de una matriz?
new Vue({ data() { return { value: 1, values: [], products: [{ name: 'test 1', }, { name: 'test 2', }] } }, created() { for (i = 0; i < products.length; i++) { this.values.push(1); } } }).$mount('#app') @import url(https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.css); * { margin:0; padding:0; box-sizing:border-box; } .app-content { padding:40px 15px; } <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.js"></script> <div id="app"> <div class="app-content"> <div v-for="(product, index) in products"> <p> {{ product.name }}: {{ values[index] }} </p> <vue-range-slider v-model="values[index]" min="0" max="10"></vue-range-slider> </div> </div> <div>example of working if not an array:</div> <p> this works: {{ value }} </p> <vue-range-slider v-model="value" min="0" max="10"></vue-range-slider> </div> Como puede ver en el ejemplo anterior, los controles deslizantes de la matriz no muestran el número después de los dos puntos hasta que comienza a deslizar, donde si establece el valor predeterminado en los data (como en el valor único), entonces funciona bien
Entonces, mi pregunta es ¿cómo vincula un valor predeterminado al modelo cuando es una matriz de tamaño desconocido (los productos se cargan desde una API, por lo que no siempre habrá 2)?
Probar
for (i = 0; i < this.products.length; i++) { this.values.push(1); }