Vue中使用单选按钮切换组件的实现方案咨询

Hey there! I see where the issue is with your component toggling—let's get this sorted out quickly. The main problems are with how you're binding the radio buttons and checking the v-show conditions. Here's what needs to change:

Key Issues in Your Current Code #

• Radio buttons use a string value for v-model, not an array. You've set picked as an empty array, which works for checkboxes but not single-selection radio buttons.
• Your v-show conditions are trying to access properties on picked (like picked.first_toggle), but picked should hold the string value of the selected radio button—so you need to compare it directly to the button's value.
• The hardcoded checked attribute on the second radio button is unnecessary once you set the initial value in data (v-model will handle the default selection).

Corrected Code #

Here's the fixed version of your component:

Template Section

<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" 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>Read</p></label>
      <label for="second_toggle"><p>Reading</p></label>
      <label for="third_toggle"><p>Want To Read</p></label>
      <div class="toggle_option_slider">
        <span>Picked: {{ picked }} </span>
      </div>
    </div>
    <!-- Use direct value comparison for v-show -->
    <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 Section

<script>
import Read from './Read.vue'
import Reading from './Reading.vue'
import WantToRead from './Want_To_Read.vue'
export default {
  data(){
    return {
      // Set picked to a string, with the default selected value (matches second radio button)
      picked: 'second_toggle'
    };
  },
  components: {
    appRead: Read,
    appReading: Reading,
    appWantToRead: WantToRead
  }
}
</script>

What Changed? #

1. picked data type: Switched from an array to a string, which is the correct type for radio button v-model binding.
2. v-show conditions: Updated to compare picked directly to the radio button's value (e.g., picked === 'first_toggle'), so the correct component shows when its corresponding radio button is selected.
3. Removed hardcoded checked: The default selection is now handled by setting picked: 'second_toggle' in data, which is cleaner and aligns with Vue's reactive approach.

This should make your radio buttons correctly toggle between the Read, Reading, and WantToRead components!

内容的提问来源于stack exchange，提问作者Eliza K.