How can I use the ?? operator in VueJs templates?

Question

I am trying to build a component to handle the editing of a substructure of my data. This piece of data is an object but in the main object, it is optional. So when invoking component I am trying to use the ?? operator to pass in an empty object to avoid access of undef issue. I would also like to be able to use the ?. operator for the same reason. Like so.

<template>
  <my-sub-component :value="value.scf_rule??{}" />
</template>

However, Vuejs doesn't really like the question marks in the HTML attributes on my template. I get the following error:

Syntax Error: SyntaxError: Unexpected token (1:93)

This should be a really simple lookup on the web but I have been looking for quite a while and it's not easy. It doesn't help that searching for question marks isn't really possible.

I've tried escaping it with a backslash, that doesn't seem to work. Anyone know how I can have an expression in my attribute that uses the question mark operator? I suppose I could define my own nvl utility function but that seems a tad silly.

Yeah I understand there are plenty of ways to define the expression I need outside of the attribute, but I'm wondering mostly if I can use ?? And potentially several other elements of javaacript in this context. — mmachenry, Mar 13 '21 at 01:54
`` works too. https://stackoverflow.com/questions/61480993/when-should-i-use-nullish-coalescing-vs-logical-or — Michal Levý, Mar 13 '21 at 12:07
@MichalLevý It's not about "what works", it's about how can you use new Javascript features. — connexo, Mar 13 '21 at 13:09

connexo · Accepted Answer · 2021-03-13T02:17:26.063

2

If you remove any kind of build stack from the equation, you can use whatever your platform supports. Your browser then will run the code just as you author it.

Otherwise you are limited to what the acorn parser version used by your webpack/bundler supports (usually everything finalized in the spec and proposals that have reached stage 4). With Vue, you're probably using webpack.

If you are fine with your code being transpiled to older JS versions, use Babel along with the necessary plugins 1 2.

edited Mar 13 '21 at 02:17

answered Mar 13 '21 at 02:11

connexo

53,704
14
91
128

And [this is](https://github.com/vuejs/vue-loader/issues/1697#issuecomment-780455307) how you can do it in Vue CLI project (which already has Babel included) – Michal Levý Mar 13 '21 at 12:02

How can I use the ?? operator in VueJs templates?

1 Answers1