0
134
VistasEl modelo V no se actualiza al cambiar la lista de casillas de verificación
Tengo una lista de casillas de verificación que se representan con v-for en un componente. Cuando están marcadas, las casillas de verificación llenan una matriz con las casillas de verificación seleccionadas actualmente. El problema surge cuando se elimina una o más de las casillas de verificación marcadas: el v-model todavía cuenta la casilla de verificación eliminada. ¿Cómo actualizo el v-model medida que se actualiza mi matriz? Intenté forzar la representación de todo el componente que resuelve el problema, pero no es la solución que necesito.
<div v-for="player in players" :key="player.id"> <input v-model="selectedPlayers" :value="player.id" type="checkbox" :id="player.id" /> <label :for="player.id"> {{ player.name }} </label> </div>Problema
Resultado deseado
2 Respuestas
Responde la pregunta0
V-model no eliminará los datos cuando el componente ya no se represente, debe hacerlo explícitamente.
Puede filtrar los jugadores seleccionados del controlador @click para que solo incluya los ID que están en la nueva variable.
this.selectedPlayers = this.selectedPlayers.filter( id => players2.find( player => player.id === id ) )0
Entonces, por lo que entiendo, tiene esta matriz player2 , con la que debe comparar. Lo que sea que esté en la matriz players2 debe estar en la matriz selectedPlayers . Para hacer esto, simplemente use la función use map array para iterar sobre la matriz players2 para devolver solo los ids de los jugadores y luego almacenarlos en la matriz de jugadores seleccionada, que al ser una propiedad reactiva parcheará automáticamente el DOM . No hay absolutamente ninguna necesidad de volver a renderizar el componente.
Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", data() { return { selectedPlayers: [], players: [ {name: "Arnold",id: "1"}, {name: "Rambo",id: 2}, {name: "Terminator",id: 3}, {name: "Titan",id: 4}, {name: "Odin",id: 5}, ], players2: [ {name: "Titan",id: 4}, {name: "Odin",id: 5}, ], }; }, methods: { clicked() { this.players = this.players2; this.selectedPlayers = this.players2.map(p => p.id); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> If you check all checkboxes and press the button, the array still contains all elements <div v-for="player in players" :key="player.id"> <input v-model="selectedPlayers" :key="players.length" :value="player.id" type="checkbox" :id="player.id" /> <label :for="player.id"> {{ player.name }} </label> </div> {{ selectedPlayers }} <button @click="clicked">Press me</button> </div>