Optional chaining not work inside v-if Vue 2

Question

i've tried to Optional Chaining my v-if condition like these

.sidebar(v-if="foo?.slug")

the previous one was like this

.sidebar(v-if="foo && foo.slug")

its works fine using this, but if i using optional chaining, it show error/not work

any solution guys? Thanks in advance

Answer 1

You are correct that optional chaining syntax (the ?. operator) is not supported in Vue.js 2 templates. This is because Vue.js templates use a different syntax from regular JavaScript, and the ?. operator is not part of that syntax.

However, you can still achieve similar functionality by using a computed property in your component that checks if a property is defined before accessing it. For example:

    <template>
      <div>
        {{ computedProperty }}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          obj: {
            prop: 'value'
          }
        }
      },
      computed: {
        computedProperty() {
          return this.obj.prop?.toUpperCase()
        }
      }
    }
    </script>