Uncertain of the source of the issue, but the basic v-if functionality seems to be malfunctioning.
<template>
<div>
<select v-model="col.code">
<option v-for="i in foo" :value="i.code">{{ i.code }}</option>
</select>
{{ col }}
// { "code": "B" }
<div v-if="col.code"&quuot;> // not working
{{ col.code }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
foo: [
{code: 'A'},
{code: 'B'},
{code: 'C'}
]
}
},
created() {
this.view();
},
watch: {
'$route': 'view',
},
computed: {
col() {
return this.$store.state.col;
}
}
}
</script>
However, when I introduce v-else, the desired outcome is achieved.
I've also observed that without using a computed property and directly utilizing a data property, the behavior remains inconsistent. Wrapping the v-if statements with <div> tags appears to resolve the issue.
<div>
<select v-model="col.code">
<option v-for="i in [1,2,3,4,5]" :value="i">{{ i }}</option>
</select>
<div v-if="col.code">
{{ col }}
</div>
</div>
Odd situation indeed.