Optional chaining in templates does not seem to work

[DRoet]

Version

15.8.3

Reproduction link

https://template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%20v-if%3D%22obj%3F.a%22%3E%7B%7B%20msg%20%7D%7D%3C%2Fdiv%3E

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"

[haoqunjiang]

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/#%7B%22src%22%3A%22%3Cdiv%20id%3D%5C%22app%5C%22%20v-if%3D%5C%22obj%3F.a%5C%22%3E%7B%7B%20msg%20%7D%7D%3C%2Fdiv%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22hoistStatic%22%3Afalse%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%7D%7D

[DRoet]

ah derp, totally read over that comment

[haoqunjiang]

Technically, to support such syntaxes in Vue 2, we need to:

1. tweak the codegen to not modify such expressions (currently it converts obj?.a to obj ? .a)
2. vue-template-es2015-compiler needs to be able to parse such syntaxes (not necessarily to transpile, to parse is enough)
3. backport this commit to vue-loader 15 vuejs/vue-loader@4cb4474#diff-c735bef98c9338c75a676df1903d2afc
4. get ready for the possible numerous bug reports

We don't have the capacity to implement it yet. But contributions are welcome.

[jacekkarczmarczyk]

vuejs/core@8449a97#diff-1cb91d3fc9313f91590cd27606eade47R402

[McPo]

Potential workaround includes using lodash's get as stated in #4638 (comment)

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

[Edmund1645]

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

@McPo Just how safe do you think this is? I'm about to use it in production code because I do not want to set computed properties for the numerous nested fields that may be undefined or null

[McPo]

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

@McPo Just how safe do you think this is? I'm about to use it in production code because I do not want to set computed properties for the numerous nested fields that may be undefined or null

As far as Im aware, it should be fine, as youre in control of the input. The only issues would be if the developer wasnt aware that its using eval and allows user input to it, but that doesn't really make sense in the case of the elvis operator.

It may have a performance impact though, in that Vue will probably recall the method on every update. I would also suspect theres some overhead in calling eval in the first place. Providing its not in a tight loop, realistically you're not likely to notice a difference.