当其中的属性在异步方法 TypeScript 中更新时，V-if 不起作用答案

【问题标题】：V-if not working when property in it updated in async method TypeScript当其中的属性在异步方法 TypeScript 中更新时，V-if 不起作用
【发布时间】：2021-12-02 16:53:58
【问题描述】：

我们有这样一种情况，当服务器返回异步调用后隐藏一个 HTML 元素而显示其他 HTML 元素：

<template>
   <div v-if="!showElementTwo">Element 1</div>
   <div v-if="showElementTwo">Element 1</div> 
</template>

<script lang="ts">

export default class extends Vue {
    showElementTwo = false;

    private someAsyncRequestToServer = async() => {
        // some async request to the server
        this.showElementTwo = true;   
    } 
}
</script>

this.showElementTwo 确实更改为true 但这不会重新渲染元素（不隐藏element 1 并显示element 2）？

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

解决方案是在单独的方法中更新showElementTwo，如下所示：

<script lang="ts">

export default class extends Vue {
    showElementTwo = false;

    show() {
      this.showElementTwo = true; 
    }

    private someAsyncRequestToServer = async() => {
        // some async request to the server
        this.show();
    } 
}
</script>

我猜 Vue 无法根据在异步函数中更新的属性重新渲染元素（这可能只是与 TS 相关的问题）...还有什么其他想法，cmets 对此...？

【讨论】：