A continuación se muestran los datos en un componente.
data: function () { return { sltAreaStyle: { paddingTop: "3%", }, checkedTypes: ["krw", "btc", "usdt"], }; },A continuación se muestra la función de observación de los datos de tipos comprobados
watch: { checkedTypes: { handler: function (newVal, oldVal) { if (newVal.length < 1) { alert("Choose one or more."); var last = oldVal[0]; this.$data.checkedTypes = [last]; } }, }, },A continuación se muestra mi plantilla html
<div class="ckbxArea"> <input type="checkbox" value="krw" v-model="checkedTypes">KRW</input> <input type="checkbox" value="btc" v-model="checkedTypes">BTC</input> <input type="checkbox" value="usdt" v-model="checkedTypes">USDT</input> </div> Quiero cambiar el último valor a datos de checkedTypes verificados cuando todas las casillas de verificación estén desmarcadas. Si finalmente se desmarcó la primera casilla de verificación, los checkedTypes verificados serían 'krw' como los tipos verificados checkedTypes = ['krw'] Los datos de los checkedTypes verificados son ['krw'] , pero todas las etiquetas de las casillas de verificación están desmarcadas. Es decir, dom no se ha actualizado. No creo entender bien el ciclo de vida de Vue. Creo que este problema está relacionado con el ciclo de vida del modelo v y los componentes, pero no sé cuál es el problema. Explique por qué ocurre este problema y dígame cómo solucionarlo.
Bueno, esto es más sobre los mecanismos de renderizado de Vue para los controles de entrada de campo v-model .
Mira esto:
['krw'][] PERO el observador lo establece inmediatamente en el mismo valor que antes ... ['krw']v-model es el mismo que durante el último renderizado, no actualiza la casilla de verificaciónLa solución simple para situaciones como esta es posponer la actualización al próximo ciclo de renderizado usando nextTick
this.$nextTick(() => { this.checkedTypes = [last]; }) new Vue({ el: "#app", data: function () { return { checkedTypes: ["krw", "btc", "usdt"], }; }, updated() { console.log("Component updated") }, watch: { checkedTypes: { handler: function (newVal, oldVal) { if (newVal.length < 1) { alert("Choose one or more."); //console.log("Choose one or more."); var last = oldVal[0]; // this.checkedTypes = [last]; this.$nextTick(() => { this.checkedTypes = [last]; }) } }, }, }, }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script> <div id="app"> <input type="checkbox" value="krw" v-model="checkedTypes"/> KRW <input type="checkbox" value="btc" v-model="checkedTypes"/> BTC <input type="checkbox" value="usdt" v-model="checkedTypes"/> USDT <pre>{{ checkedTypes }}</pre> </div>