Vuejs：根据是否选中单选按钮来更改布尔变量答案

【问题标题】：Vuejs: Change a boolean variable based on if a radio button is checked or notVuejs：根据是否选中单选按钮来更改布尔变量
【发布时间】：2020-09-07 18:25:19
【问题描述】：

我需要根据条件 v-if="addNewCard" 显示一个 div。只有当它是真的我需要显示 div。最初将 addNewCard 的值设置为 false。当用户单击单选按钮 - 添加新卡时，我需要将其设为 true 以便显示 div，但如果用户单击另一个单选按钮，则应将变量设为 false 隐藏 div。我怎样才能做到这一点。如果它不需要在点击时调用函数就可以工作，那就太好了。

            addNewCard: false

            <div>
                <b-form-group label="Payment Options">
                    <b-form-radio v-model="selected" name="some-radios" value="A">Continue payment using the card **** **** ****</b-form-radio>
                    <b-form-radio v-model="selected" name="some-radios" value="B">Add new Card</b-form-radio>
                </b-form-group>
            </div>
            <div v-if="addNewCard">
                  ............  
            </div>

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

在这里使用计算方法：

computed: {
  addNewCard: {
    get: function () {
      return this.selected === 'A'
    }
  }
}

现在，如果值为 A，则您的 addNewCard 为 true，如果值为 B，则为 false。

你可以阅读更多关于computed properties here

【讨论】：

【解决方案2】：

  <div>
                <b-form-group label="Payment Options">
                    <b-form-radio v-model="selected" name="some-radios" value="A">Continue payment using the card **** **** ****</b-form-radio>
                    <b-form-radio v-model="selected" name="some-radios" value="B">Add new Card</b-form-radio>
                </b-form-group>
            </div>
            <div v-if="addNewCard">
                  ............  
            </div>


<script>
 data() {
   selected: ""  
 },
 computed: {
   addNewCart() {
    return this.selected === "A"   
   } 
 }
</script>

现在应该可以了。

【讨论】：