TypeScript 中异步方法更新属性后 v-if 不触发视图重渲染问题

问题原因 #

1. 缺失类组件必要装饰器 #

你当前使用的是Vue类式组件写法，依赖vue-class-component库的能力完成响应式属性转换，代码中导出的类前没有添加@Component装饰器，导致Vue无法识别类内部声明的showElementTwo为响应式属性，所以修改该值不会触发视图重渲染。

2. Vue2环境多根节点异常 #

Vue2不支持模板内存在多个根节点，你当前模板中两个div直接平级放在<template>下没有父元素包裹，也会导致渲染逻辑异常，无法正常触发节点切换。

解决方案 #

第一步：补全装饰器配置 #

先确保项目已经安装vue-class-component、vue-property-decorator依赖，然后在导出的类前添加@Component装饰器：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class extends Vue {
    showElementTwo = false;

    private someAsyncRequestToServer = async() => {
        // 服务端异步请求逻辑
        this.showElementTwo = true;   
    } 
}
</script>

第二步：修复模板结构（Vue2环境必填） #

给两个平级元素添加公共父节点，也可以把互斥展示的第二个元素改为v-else简化逻辑：

<template>
   <div class="container">
     <div v-if="!showElementTwo">Element 1</div>
     <div v-else>Element 2</div> 
   </div>
</template>

临时验证方案 #

如果修改后依旧没有生效，可以在修改showElementTwo的代码后加一行this.$forceUpdate()强制触发视图更新，如果加完可以正常切换，即可确认是响应式配置问题，回头检查依赖安装、装饰器引用是否正确即可。

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