Optional chaining in templates does not seem to work

Version

15.8.3

Reproduction link

https://template-explorer.vuejs.org/#<div id%3D"app" v-if%3D"obj%3F.a">{{ msg }}<%2Fdiv>

Steps to reproduce

Use a v-if that uses optional chaining w/ @vue/cli version 4.2.0:

v-if="test?.length > 0"

What is expected?

no error is thrown

What is actually happening?

following error is thrown:

  Errors compiling template:

  invalid expression: Unexpected token '.' in

    test?.length > 0

  Raw expression: v-if="test?.length > 0"

[McPo]

Potential workaround includes using lodash’s get as stated in https://github.com/vuejs/vue/issues/4638#issuecomment-397770996

Another hack is to use eval.

As $eval was taken out in Vue 2, you’ll have to create your own mixin so that it can be accessed in all components without having to import it into each one.

i.e.

Vue.mixin({
  methods: {
    $elvis: p => eval('this.'+p)
  }
});

Example template

<template>
<span>{{ $elvis('foo?.bar') }}</span>
</template>

Although its still no substitute for the real operator, especially if you have many occurrences of it

[sodatea]

As said in the release notes:

// Note: scripts only, support in template expressions only available in Vue 3

https://vue-next-template-explorer.netlify.com/#{"src"%3A"<div id%3D\"app\" v-if%3D\"obj%3F.a\">{{ msg }}<%2Fdiv>"%2C"options"%3A{"mode"%3A"module"%2C"prefixIdentifiers"%3Afalse%2C"hoistStatic"%3Afalse%2C"cacheHandlers"%3Afalse%2C"scopeId"%3Anull}}