带有 vue 3 的输入类型收音机

Question

这段代码几乎可以工作了。单击时我有 3 个输入字段，它们在它们下方切换另一个 div 并且它可以工作。我的问题是我只想显示一个 div atm，所以当单击一个时，另外两个应该隐藏。请看代码。

<template>
<div class="payment">
    <div class="option">
        <div class="pouzecem" @click="changePouzecem">
            <input type="radio" :checked="showPouzecem">
            <p>Pouzecem(provizija + 13kn)</p>
        </div>
        <div class="desc" v-show="showPouzecem">
            <p>Izborom opcije plaćanje pouzećem</p>
        </div>
    </div>
    <div class="option">
        <div class="card" @click="changeCard">
            <div>
                <input type="radio" :checked="showCard">
                <p>Kreditna kartica</p>
            </div>
            <img src="../assets/icons/cards.png">
        </div>
        <div class="desc" v-show="showCard">
            <p>Kreditna kartica</p>
            <div class="card-info">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="option">
        <div class="paypal" @click="changePayPal">
            <div>
                <input type="radio" :checked="showPayPal">
                <p>PayPal</p>
            </div>
            <img src="../assets/icons/paypal.png" >
        </div>
        <div class="desc" v-show="showPayPal">
            <button class="paypal-btn"><icon name="paypal"></icon></button>
            <p>The safer, easier way to pay</p>
        </div>
    </div>
</div>
</template>

<script>
import Icon from './icons/Icon.vue'

export default {
    components: { Icon },
    data() {
        return {
            showPouzecem: true,
            showCard: false,
            showPayPal: false
        }
    },
    methods: {
        changePouzecem() {
            this.showPouzecem = !this.showPouzecem
            if(this.showPouzecem === true) {
                this.showCard === false
                this.showPayPal === false
            }
        },
        changeCard() {
            this.showCard = !this.showCard
            if(this.showPouzecem === true) {
                this.showPouzecem === false
                this.showPayPal === false
            }
        },
        changePayPal() {
            this.showPayPal = !this.showPayPal
            if(this.showPayPal === true) {
                this.showPouzecem === false
                this.showCard === false
            }
        }
    }
}
</script>

看起来 v-show 在调用函数后没有更新。有什么办法解决这个问题？

Answer 1

本地， input[type="radio"]通过共享相同的 name属性来工作，并且当另一个输入指向相同的 name时，它们会自动切换到未选中。

。

在 Vue 中，您可以使用相同的 v-model。

您不需要任何change 方法。您可以依赖v-model 的当前值（在无线电之间共享）（在以下示例中为selectedOption）：

const {
  createApp
} = Vue;
createApp({
  data: () => ({
    selectedOption: 'pouzecem'
  })
}).mount('#app')

label {
  cursor: pointer;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <div class="payment">
    <div class="option">
      <div class="pouzecem">
        <p>
          <label>
            <input type="radio" v-model="selectedOption" value="pouzecem">
            <span>Pouzecem(provizija + 13kn)</span>
          </label>
      </p>
      <div class="desc" v-show="selectedOption === 'pouzecem'">
        <p>Izborom opcije plaćanje pouzećem</p>
      </div>
    </div>
    <div class="option">
      <div class="card">
        <p>
          <label>
            <input type="radio" v-model="selectedOption" value="card">
            <span>Kreditna kartica</span>
            <!--img src="../assets/icons/cards.png" -->
          </label>
        </p>
      </div>
      <div class="desc" v-show="selectedOption === 'card'">
        <p>Kreditna kartica</p>
        <div class="card-info">
          <input type="text">
        </div>
      </div>
    </div>
    <div class="option">
      <div class="paypal">
        <p>
          <label>
            <input type="radio" v-model="selectedOption" value="paypal">
            <span>PayPal</span>
            <!-- img src="../assets/icons/paypal.png" -->
          </label>
        </p>
      </div>
      <div class="desc" v-show="selectedOption === 'paypal'">
        <button class="paypal-btn"><icon name="paypal">Icon...</icon></button>
        <p>The safer, easier way to pay</p>
      </div>
    </div>
  </div>
</div>