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>