v-if 在没有 v-else 的情况下无法使用返回 Vuex 状态的计算属性

Question

我不确定问题出在哪里，但是，基本v-if功能无法正常工作。

<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"> // 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>

但是，如果我添加v-else，结果将被渲染。

我还发现，如果我做同样的事情，没有计算属性，但直接使用数据属性，它也不起作用。使它起作用的是添加周围的 v-if 语句。

<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>

奇怪的。

Answer 1

看起来没问题，<div v-if="col.code">但是将 select 绑定到计算属性是错误的，因此您应该使用计算 setter：&nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; col: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; get(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.$store.state.col;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set(newVal){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$store.commit('UPDATE_COL',newVal);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }Vue.use(Vuex)//store instanceconst store = new Vuex.Store({&nbsp; state: {&nbsp; &nbsp; col: {&nbsp; &nbsp; &nbsp; code: 'A'&nbsp; &nbsp; }&nbsp; },&nbsp; mutations: {&nbsp; &nbsp; UPDATE_COL(state, payload) {&nbsp; &nbsp; &nbsp; state.col = payload&nbsp; &nbsp; }&nbsp; }})//vue instancelet app = new Vue({&nbsp; el: '#app',&nbsp; store,&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; foo: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; code: 'A'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; code: 'B'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; code: 'C'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; created() {&nbsp; },&nbsp; computed: {&nbsp; &nbsp; col: {&nbsp; &nbsp; &nbsp; get() {&nbsp; &nbsp; &nbsp; &nbsp; return this.$store.state.col;&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; set(newVal) {&nbsp; &nbsp; &nbsp; &nbsp; this.$store.commit('UPDATE_COL', newVal);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg.com/vuex"></script><div id="app">&nbsp; <select v-model="col.code">&nbsp; &nbsp; <option v-for="i in foo" :value="i.code">{{ i.code }}</option>&nbsp; </select>&nbsp; <div v-if="col.code">&nbsp; &nbsp;My code : {{ col.code }}&nbsp; </div></div>