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：

  computed: {
        col: {
            get(){
              return this.$store.state.col;
             
              },
            set(newVal){
              this.$store.commit('UPDATE_COL',newVal); 
            }  
        }
    }

Vue.use(Vuex)
//store instance
const store = new Vuex.Store({
  state: {
    col: {
      code: 'A'
    }
  },
  mutations: {
    UPDATE_COL(state, payload) {
      state.col = payload
    }
  }
})

//vue instance
let app = new Vue({
  el: '#app',
  store,
  data() {
    return {
      foo: [{
          code: 'A'
        },
        {
          code: 'B'
        },
        {
          code: 'C'
        }
      ]
    }
  },
  created() {

  },

  computed: {
    col: {
      get() {
        return this.$store.state.col;

      },
      set(newVal) {
        this.$store.commit('UPDATE_COL', newVal);
      }
    }
  }

})

<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">
  <select v-model="col.code">
    <option v-for="i in foo" :value="i.code">{{ i.code }}</option>
  </select>


  <div v-if="col.code">
   My code : {{ col.code }}
  </div>

</div>