Vue+Quasar实现选选项点Continue后隐藏原卡片显示新卡片

以下是修改后的完整代码：

<template>
  <div class="q-pa-md" id="meal">
    <!-- 初始卡片：添加v-if控制显示 -->
    <q-card class="my-card" v-if="showInitialCard">
      <q-card-section>
        <q-form ref="mealPlanForm" class="q-gutter-md">
          <q-radio name="patientType" v-model="patientType" val="Existing Patient" label="Existing Patient" id="opt1"/>
          <q-radio name="patientType" v-model="patientType" val="New Patient" label="New Patient" id="opt2"/>

          <q-card v-if="patientType === 'New Patient'" flat bordered class="q-mt-md ">
            <q-card-section>Patient Data</q-card-section>
            <q-separator />
            <q-card-section class="row q-gutter-sm items-center">
              <q-separator />
              <div class="q-px-sm q-py-xs rounded-borders text-center text-no-wrap">
                <q-radio name="patientType" v-model="patientType" val="addPatient" label="Add Patient to System" />
                <q-radio name="patientType" v-model="patientType" val="MealPlan" label="Continue without adding patient to system" />
              </div>
            </q-card-section>
          </q-card>
        </q-form>

        <div class="row flex-center q-my-md">
          <q-btn @click="handleContinue" label="Continue" type="submit" color="primary"/>
        </div>
      </q-card-section>
    </q-card>

    <!-- 第二个卡片：单独放在外面，避免被初始卡片包裹 -->
    <basicMealplan v-if="showCard"></basicMealplan>
  </div>
</template>

<script>
import { ref } from 'vue'
import basicMealplan from './mealPlanCard.vue'

export default {
  components: {
    basicMealplan
  },
  setup () {
    const showCard = ref(false)
    const patientType = ref('Existing Patient')
    // 新增变量控制初始卡片显示
    const showInitialCard = ref(true)

    // 处理Continue按钮点击逻辑
    const handleContinue = () => {
      showCard.value = true
      // 如果选择的是Existing Patient，隐藏初始卡片
      if (patientType.value === 'Existing Patient') {
        showInitialCard.value = false
      }
    }

    return {
      showCard,
      patientType,
      showInitialCard,
      handleContinue
    }
  }
}
</script>

关键改动说明 #

• 新增showInitialCard响应式变量，默认值为true，用来控制初始选项卡片的显示状态
• 将Continue按钮的直接赋值逻辑改为调用handleContinue方法，在方法中统一处理：
  • 始终设置showCard = true，确保第二个卡片显示
  • 当选中Existing Patient时，设置showInitialCard = false，隐藏初始卡片
• 将basicMealplan组件移到初始卡片的外面，避免被初始卡片的隐藏逻辑影响
• 给初始的q-card添加v-if="showInitialCard"，实现条件显示

内容的提问来源于stack exchange，提问作者MINGJI