vue中v-model使用計算屬性,雙向繫結失效
阿新 • • 發佈:2019-02-09
在vue中v-model綁定了一個值到val中,用到了計算屬性監測val的變化,但是使用了computed之後,v-model的雙向繫結失效
<div class = "flex f7" style = "width: 0" v-if="isIos || isAndroid"> <input class = "f7" type = "text" v-model = "getAddress" :placeholder = "$t('withdraw.adsToast')"/> <div class = "f1 img-cont" @click = "scan()"> <img src = "../../assets/img/ic-withdrawAds.png" class = "ic-ads"/> </div> </div>
computed: {
getAddress() {
if(this.$store.state.updateAddress){
this.address = this.$store.state.updateAddress
}
return this.$store.state.updateAddress;
},
},
輸入地址之後再輸入下面其他input值,地址值變為空,列印this.address為空
後來在計算屬性中加入get和set解決了雙向繫結問題
computed: { getAddress: { get: function () { if(this.$store.state.updateAddress){ this.address = this.$store.state.updateAddress } return this.address }, set: function (value) { this.address = value }, }, },