Support optional chaining in vuejs - vue.js

Question

I have created vue and electron app using #vue/cli-service 4.2 in that I am facing a issue of optional chaining.
I can't use ? for validating the condition like (#babel/plugin-proposal-optional-chaining)
eg. a?.b?.c its means it check weather a exist then check for b otherwise
return false same as template expression in angular.
Any one have idea how to configure optional chaining in vuejs.

Answer 1

One quick update is that Vue 3 comes bundled with support for optional chaining.
To test you can try compiling the below Vue component code.
<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>

Answer 2

Try vue-template-babel-compiler
It uses Babel to enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC.
Github Repo: vue-template-babel-compiler
DEMO
Usage
1. Install
npm install vue-template-babel-compiler --save-dev
2. Config
1. Vue-CLI
DEMO project for 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
DEMO project for Nuxt.js
// nuxt.config.js
export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
loaders: {
vue: {
compiler: require('vue-template-babel-compiler')
}
},
},
// ...
}
Please refer to REAMDE for detail usage
Support for Vue-CLI, Nuxt.js, Webpack , any environment use vue-loader v15+.

Answer 3

According to this comment on an issue here
You could create a global mixin and use the eval function to evaluate the expression.
Example:
Vue.mixin({
methods: {
$evaluate: param => eval('this.'+param)
}
});
In the template:
<template>
<p>{{ $evaluate('user?.name') }}</p>
</template>
They also added that it might not be perfect:
Although it's still no substitute for the real operator, especially if you have many occurrences of it
Edit
As stated above, using eval may bring some unintended problems, I suggest you use a computed property instead.
In the SFC:
<template>
<p>{{ userName }}</p>
</template>
<script>
export default {
data(){
return {
user: {
firstName: 'Bran'
}
}
},
computed: {
userName(){
return this.user?.firstName
}
}
}
</script>

Answer 4

/*
* Where to use: Use in vue templates to determine deeply nested undefined/null values
* How to use: Instead of writing parent?.child?.child2 you can write
* isAvailable(parent, 'child.child2')
* #author Smit Patel
* #params {Object} parent
* {String} child
* #return {Boolean} True if all the nested properties exist
*/
export default function isAvailable(parent, child) {
try {
const childArray = String(child).split('.');
let evaluted = parent;
childArray.forEach((x) => {
evaluted = evaluted[x];
});
return !!evaluted;
} catch {
return false;
}
}
Use :
<template>
<div>
<span :v-if="isAvailable(data, 'user.group.name')">
{{ data.user.group.name }}
<span/>
</div>
</template>
<script>
import isAvailable from 'file/path';
export default {
methods: { isAvailable }
}
</script>

Answer 5

This doesn't work exactly the same but I think, in this context, it may be event better for most cases.
I used Proxy for the magic method effect. You just need to call the nullsafe method of an object and from there on, just use normal chaining.
In some versions of VueJs you can't specify a default value. It perceives our null safe value as an object (for good reason) and JSON.stringify it, bypassing the toString method. I could override toJSON method but you can't return the string output. It still encodes your return value to JSON. So you end up with your string in quotes.
const isProxy = Symbol("isProxy");
Object.defineProperty(Object.prototype, 'nullsafe', {
enumarable: false,
writable: false,
value: function(defaultValue, maxDepth = 100) {
let treat = function(unsafe, depth = 0) {
if (depth > maxDepth || (unsafe && unsafe.isProxy)) {
return unsafe;
}
let isNullish = unsafe === null || unsafe === undefined;
let isObject = typeof unsafe === "object";
let handler = {
get: function(target, prop) {
if (prop === "valueOf") {
return target[prop];
} else if (typeof prop === "symbol") {
return prop === isProxy ? true : target[prop];
} else {
return treat(target[prop], depth + 1);
}
}
};
let stringify = function() {
return defaultValue || '';
};
let dummy = {
toString: stringify,
includes: function() {
return false;
},
indexOf: function() {
return -1;
},
valueOf: function() {
return unsafe;
}
};
return (isNullish || isObject) ? (new Proxy(unsafe || dummy, handler)) : unsafe;
};
return treat(this);
}
});
new Vue({
el: '#app',
data: {
yoMama: {
a: 1
}.nullsafe('xx'),
yoyoMa: {
b: 1
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ yoMama.yoyoMa.yoMama.yoyoMa.yoMama }}
<hr> {{ yoyoMa.nullsafe('yy').yoMama.yoyoMa.yoMama.yoyoMa }}
</div>

Answer 6

After search many possibilities, I maked one function to help me.
Make one js file to save the helper function and export it
const propCheck = function (obj = {}, properties = ""){
const levels = properties.split(".");
let objProperty = Object.assign({}, obj);
for ( let level of levels){
objProperty = objProperty[level];
if(!objProperty)
return false;
}
return true;
}
export default propCheck;
And install this function for globally in the Vue instance
Vue.prototype.$propCheck = propCheck;
After use in your template
<span>{{$propCheck(person, "name")}}</span>
or
<span>{{$propCheck(person, "contatcs.0.address")}}</span>
or
<span>{{$propCheck(person, "addres.street")}}</span>

Answer 7

Use getSafe() method way for template and js files :)
<template><div>
{{getSafe(() => obj.foo.bar)}} <!-- returns 'baz' -->
{{getSafe(() => obj.foo.doesNotExist)}} <!-- returns undefined -->
</div></template>
<script>
export default {
data() {
return {obj: {foo: {bar: 'baz'}}};
},
methods: {getSafe},
};
function getSafe(fn) {
try { return fn(); }
catch (e) {}
}
</script>

Answer 8

July 2022 Update:
It works with Vue 2.7 (https://blog.vuejs.org/posts/vue-2-7-naruto.html)
2.7 also supports using ESNext syntax in template expressions.

Answer 9

You can use loadash's get method in this case:
_.get(object, path, [defaultValue])
Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.
https://lodash.com/docs/4.17.15#get
var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'