Vue JS One Checkbox unchecking another-CodePudding

I am trying to get one checkbox to uncheck another (kinda like radio buttons). I am a little bit of a Vue noob so I am not sure what I am doing wrong. Here are the two inputs.

<label for="'product-' product.id"
     
     :
     >

<input 
       type="checkbox" 
       :id="'product-' product.id"
       :value="false"
       v-model="selected"/>

<div >None</div>
</label>

<label :for="'product-' product.id"
     
     :
     :data-product-id="product.id">
<div >
<input 
       type="checkbox"
       :value="true"
       :id="'product-' product.id"
       v-model="selected"/>
</div>

Recording of the problem

CodePudding user response：

You can use radio buttons instead of checkbox:

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"
       
       :
       >
  <input 
         type="radio" 
         :id="'product-' product.id"
         :value="false"
         v-model="selected"/>
  </label>
  <label :for="'product-' product.id"
       
       :
       :data-product-id="product.id">
  <input 
         type="radio"
         :value="true"
         :id="'product-' product.id"
         v-model="selected"/>
         
  </label>
</div>

CodePudding user response：

You can try this.

<label for="'product-' product.id"
     
     :
     >

<input 
       type="radio" 
       :id="'product-' product.id"
       :value="checkStatus"
       @change="check($event.target.value)"/>

<div >None</div>
</label>

<label :for="'product-' product.id"
     
     :
     :data-product-id="product.id">
<div >
<input 
       type="radio"
       :value="checkStatus"
       :id="'product-' product.id"
       @change="check($event.target.value)/>
</div>

In your script of component, you can define method check() inside of methods.

<script>
export default {
    data() {
        return {
            checkStatus: false
        }
    },
    methods: {
        check: function(val) {
              this.checkStatus = !val;
        }
    },
}
</script>

CodePudding user response：

If you absolutely need to use checkboxes instead of radio inputs, you can reverse the true-value and false-value props of one input. This way it will mimic the behavior of the radio buttons.

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="true"/>

<label for="second_input"
     >True</label>
<input
       type="checkbox" 
       id="second_input"
       v-model="selected" />
       
<br/>
       
Input value: {{ selected }}

</div>