支持 vuejs 中的可选链接

Question

我使用@vue/cli-service 4.2 创建了 vue 和 electron 应用程序，因为我面临可选链接的问题。

我不能用？用于验证条件，如 (@babel/plugin-proposal-optional-chaining)

例如。 a?.b?.c 它意味着它检查天气 a 是否存在然后检查 b 否则返回 false 与角度模板表达式相同。

任何人都知道如何在 vuejs 中配置可选链接。

原文由 Hardik Kothari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个快速更新是 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: '[e-mail]',
        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>

原文由 Akash Kumar Seth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试 vue-template-babel-compiler

它使用 Babel 启用 Optional Chaining(?.) ， Nullish Coalescing(??) 和 Vue.js SFC 3322cbb14-cade-f1bb9的许多新ES语法

Github 仓库：vue-template-babel-compiler

演示

用法

1.安装

npm install vue-template-babel-compiler --save-dev

2.配置

1.Vue-CLI

Vue-CLI 的演示项目

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

2.Nuxt.js

Nuxt.js 的演示项目

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

详细用法请参考REAMDE

支持 Vue-CLI, Nuxt.js, Webpack ，任何环境使用 vue-loader v15+ 。

原文由 Junior Tour 发布，翻译遵循 CC BY-SA 4.0 许可协议