Shopware 6.6. + Vue 3

As written in the last blogpost, we had the problem, that we had a object chain which somewhere in between was null and therefore threw an error.

Null safe operator

In PHP I would fix the problem the null safe operator ?->. And the same exists in JavaScript: ?. .

Available in Vue 3

The good news: optional chaining is available in Vue 3! The bad news: Shopware 6.5 is bundled with Vue 2.

Shopware 6.6 comes with Vue 3

But the future will be bright: Shopware 6.6. comes with Vue 3

What can we do then?

// This is the current code

<li v-for="(doc) in item.documents" v-if="doc.config && doc.config.custom && doc.config.custom.invoiceNumber">

// And with Vue3 I expect it to be reduced to:

<li v-for="(doc) in item.documents" v-if="doc?.config?.custom?.invoiceNumber">