Question

我的配置文件组件上有3个单选按钮，需要在读取，读取和wantToRead组件之间切换。我怎样才能做到这一点？

我想我需要获取输入值以将其设置为v-show的条件。

<template>

    <div class="wrapper">
      <div class="toggle_radio">
        <input type="radio" class="toggle_option" id="first_toggle" value="first_toggle" name="toggle_option" v-model="picked">
        <input type="radio" checked class="toggle_option" id="second_toggle" value="second_toggle" name="toggle_option" v-model="picked">
        <input type="radio" class="toggle_option" id="third_toggle" value="third_toggle" name="toggle_option" v-model="picked">
        <label for="first_toggle"><p>First Button</p></label>
        <label for="second_toggle"><p>Second Button</p></label>
        <label for="third_toggle"><p>Third Button</p></label>
        <div class="toggle_option_slider">
        <span>Picked: {{ picked }} </span>
        </div>
      </div>

      <app-read v-show="picked.first_toggle"></app-read>
        <app-reading v-show="picked.second_toggle"></app-reading>
        <app-want-to-read v-show="picked.third_toggle"></app-want-to-read>

    </div>
</template>

<script>
    import Read from './Read.vue'
    import Reading from './Reading.vue'
    import WantToRead from './Want_To_Read.vue'

    export default {
        data(){
            return {
                picked: []
            };
        },
        components: {
            appRead: Read,
            appReading: Reading,
            appWantToRead: WantToRead
        }
    }
</script>

Answer 1

为清楚起见，您应该将picked初始化为null。它只有一个标量值，它不是一个数组。

v-show的条件应如下：

v-show="picked === 'third_toggle'"

您要检查picked中存储的值。

在Vue中使用单选按钮切换组件

1 个答案: