问Vue JS一个复选框取消另一个复选框
EN

Stack Overflow用户

提问于 2022-04-21 07:52:57

回答 4查看 515关注 0票数 1

我试图让一个复选框取消另一个(有点像单选按钮)。我有点像一位退伍军人，所以我不知道我做错了什么。这是两个输入。

<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>

问题的记录

javascript

vue.js

vuejs2

回答 4

Stack Overflow用户

发布于 2022-04-21 08:30:54

您可以使用单选按钮而不是复选框：

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>

票数 1

Stack Overflow用户

发布于 2022-04-21 08:33:47

你可以试试这个。

<label for="'product-'+product.id"
     class="none addon_label"
     :class="{'addon_selected': !selected}"
     >

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

<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="radio"
       :value="checkStatus"
       :id="'product-'+product.id"
       @change="check($event.target.value)/>
</div>

在组件脚本中，可以在方法内部定义方法check()。

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

票数 0

Stack Overflow用户

发布于 2022-04-21 08:55:58

如果您绝对需要使用复选框而不是无线电输入，则可以反转一个输入的true-value和false-value道具。这样，它将模仿单选按钮的行为。

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>