Ionic Vue中使用v-if实现页面切换无响应该如何解决？

核心问题点 #

• pagenumber 变量未设置为响应式。Vue 3 的 setup 中直接返回的普通字符串不具备响应性，修改时无法触发视图重新渲染，所以v-if判断不会更新。
• ion-buttons 的 v-model 绑定使用方式有误，不需要通过父组件ion-buttons绑定双向值，直接给跳转按钮绑定点击事件修改pagenumber更适配Ionic组件的特性。

修正后的template代码 #

<div class="login_div" v-if="pagenumber === '1'">
    <ion-buttons>
        <ion-button>button without value</ion-button>
        <ion-button color="warning" fill="solid" expand="block" size="large" @click="pagenumber = '2'">2 page</ion-button>
    </ion-buttons>
</div>

<div class="login_div" v-else-if="pagenumber === '2'">
    <ion-buttons>
        <ion-button>button without value</ion-button>
        <ion-button color="warning" fill="solid" expand="block" size="large" @click="pagenumber = '3'">3 page</ion-button>
    </ion-buttons>
</div>

<div class="login_div" v-else-if="pagenumber === '3'">
    <ion-buttons>
        <ion-button>button without value</ion-button>
        <ion-button color="warning" fill="solid" expand="block" size="large" @click="pagenumber = '1'">1 page</ion-button>
    </ion-buttons>
</div>

<div v-else>
    <ion-text>error page</ion-text>
</div>

修正后的script代码 #

<script>
  import { ref } from 'vue'
  import { IonToolbar, IonTitle, IonText, IonButtons, IonButton } from '@ionic/vue'

  export default ({
     components: { IonToolbar, IonTitle, IonText, IonButtons, IonButton },
     setup() {
        // 用ref包裹变量使其具备响应性
        const pagenumber = ref('1')
        return {
            pagenumber,
        }
     },
  })
</script>

内容的提问来源于stack exchange，提问作者Beom-Su