When using a simple v-if in Vuejs, the following code is used:
<span v-if="!profile_full_name===''">
@{{ profile_full_name }}
</span>
<span v-else>
{{auth()->user()->fullName}}
</span>
In this case, the profile_full_name is a computed method:
profile_full_name() {
return
this.$store.state.profile_name
+ ' ' +
this.$store.state.profile_family
}
The goal is to use v-if with profile_full_name whether it's empty or not.
When profile_full_name is empty, we should see:
@{{ profile_full_name }}And when it's not empty, we should see:
{{auth()->user()->fullName}}All computed methods work fine, and @{{ profile_full_name }} without v-if and v-else function properly as well.
export default {
data() {
//...
},
computed: {
profile_full_name() {
return this.$store.state.profile_name + ' ' + this.$store.state.profile_family
}
},
methods: {
change_name({target}) {
this.$store.state.profile_name = target.value
},
change_family({target}) {
this.$store.state.profile_family = target.value
},
}
};
By the way, instead of v-if, v-else can be used interchangeably at any time.