vue.js - 支持 vuejs 中的可选链接
问题描述
我使用@vue/cli-service 4.2 创建了 vue 和电子应用程序,因为我面临可选链接的问题。
我不能用?用于验证条件,例如 (@babel/plugin-proposal-optional-chaining)
例如。a?.b?.c 这意味着它检查天气 a 是否存在然后检查 b 否则返回 false 与角度模板表达式相同。
任何人都知道如何在 vuejs 中配置可选链接。
解决方案
一个快速更新是 Vue 3 捆绑了对可选链接的支持。
要进行测试,您可以尝试编译以下 Vue 组件代码。
<template>
<div id="app" v-if="user?.username">
@{{ user?.username }} - {{ fullName }} <strong>Followers: </strong>
{{ followers }}
<button style="align-self: center" @click="followUser">Follow</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App',
props: {
test: Object
},
data() {
return {
followers: 0,
user: {
id: 1,
test: {},
username: '_sethAkash',
firstName: undefined,
lastName: 'Seth',
email: 'sethakash007@gmail.com',
isAdmin: true
}
}
},
computed: {
fullName(): string {
//
return `${this?.test?.firstName} ${this?.user?.lastName}`
}
},
methods: {
followUser: function () {
this.followers += 1
}
},
watch: {
followers(newFollowerCount, oldFollowerCount) {
if (oldFollowerCount < newFollowerCount) {
console.log(`${this?.user?.username} has gained a follower!`)
}
}
},
mounted() {
this.followUser()
}
})
</script>
推荐阅读
- multithreading - Retrofit2 parallel requests
- oracle11g - (Oracle Database 11g) 在 INSERT/UPDATE 中违反了唯一约束
- css - 旧版 Chrome 的 CSS 光标
- android - 使用 Android Camera2 API 和 Firebase ML-Kit Vision 进行实时条码处理
- scala - 块不能包含声明
- r - r 中的子集 x 个月前的数据
- r - 为什么我不能将 .Rmd 输出为 .pdf?
- laravel - Laravel 验证 3 个字段,但只需要一个
- javascript - Discord Bot 的特定角色命令
- typescript - 类型 xxx 上不存在 TypeScript 属性“名称”