Vuejs：根據是否選中單選按鈕更改 boolean 變量

Question

我需要根據條件 v-if="addNewCard" 顯示一個 div。 只有當它是真的我需要顯示 div。 最初將 addNewCard 的值設置為 false。 當用戶單擊單選按鈕 - 添加新卡時，我需要將其設為 true 以便顯示 div，但如果用戶單擊另一個單選按鈕，則應將變量設為 false 隱藏 div。 我怎樣才能做到這一點。 如果它不需要在點擊時調用 function 就可以工作，那就太好了。

            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>

Answer 1

在這里使用計算方法：

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

現在您的addNewCard如果值為A ，則為 true ，如果值為B ，則為 false 。

您可以在此處閱讀有關計算屬性的更多信息

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

現在應該可以了。