第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

v-if 在沒有 v-else 的情況下無法使用返回 Vuex 狀態(tài)的計算屬性

v-if 在沒有 v-else 的情況下無法使用返回 Vuex 狀態(tài)的計算屬性

慕虎7371278 2022-12-02 16:47:15
我不確定問題出在哪里,但是,基本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,結(jié)果將被渲染。我還發(fā)現(xiàn),如果我做同樣的事情,沒有計算屬性,但直接使用數(shù)據(jù)屬性,它也不起作用。使它起作用的是添加周圍的 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>奇怪的。
查看完整描述

1 回答

?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗 獲得超4個贊

看起來沒問題,<div v-if="col.code">但是將 select 綁定到計算屬性是錯誤的,因此您應(yīng)該使用計算 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>


查看完整回答
反對 回復(fù) 2022-12-02
  • 1 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號