Estoy tratando de obtener una casilla de verificación para desmarcar otra (algo así como botones de opción). Soy un poco novato en Vue, así que no estoy seguro de lo que estoy haciendo mal. Aquí están las dos entradas.
<label for="'product-'+product.id" class="none addon_label" :class="{'addon_selected': !selected}" > <input class="" type="checkbox" :id="'product-'+product.id" :value="false" v-model="selected"/> <div class="v-center">None</div> </label> <label :for="'product-'+product.id" class="is_flex addon_label" :class="{'addon_selected': selected}" :data-product-id="product.id"> <div class="checkbox-container"> <input class="" type="checkbox" :value="true" :id="'product-'+product.id" v-model="selected"/> </div>Puede usar botones de radio en lugar de casillas de verificación:
new Vue({ el: "#demo", data() { return { product: {id: 1}, selected: false } } }) .addon_selected { border: 1px solid black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <label for="'product-'+product.id" class="none addon_label" :class="{'addon_selected': !selected}" > <input class="" type="radio" :id="'product-'+product.id" :value="false" v-model="selected"/> </label> <label :for="'product-'+product.id" class="is_flex addon_label" :class="{'addon_selected': selected}" :data-product-id="product.id"> <input class="" type="radio" :value="true" :id="'product-'+product.id" v-model="selected"/> </label> </div>Bueno, creo que usar dos variables será un buen enfoque para tener este comportamiento (casilla de verificación como botones de opción).
Hay dos métodos setInitial y setEnd, cada uno borra la otra entrada, pero el comportamiento de la casilla de verificación sigue siendo el mismo, por lo que puede borrar o restablecer las entradas haciendo clic en la misma entrada dos veces.
new Vue({ el: "#app", data: { initial: false, end: false }, methods: { setInitial: function(){ this.end = false }, setEnd: function(){ this.initial = false } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label class="none addon_label" :class="{'addon_selected': !initial}" >Initial</label> <input type="checkbox" v-model="initial" @click="setInitial" /> ==#== <label class="is_flex addon_label" :class="{'addon_selected': end}" >End</label> <input type="checkbox" v-model="end" @click="setEnd" /> <hr> Initial {{ initial }} - End {{ end }} <hr> </div>Ejecute el fragmento y pruebe esta solución.
Si es absolutamente necesario usar casillas de verificación en lugar de entradas de radio, puede invertir las true-value false-value de una entrada. De esta forma imitará el comportamiento de los botones de opción.
new Vue({ el: "#app", data: { selected: false } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label for="first_input" >False</label> <input type="checkbox" id="first_input" v-model="selected" :true-value="false" :false-value="null"/> <label for="second_input" >True</label> <input type="checkbox" id="second_input" v-model="selected" :false-value="null"/> <br/> Input value: {{ selected }} </div>