【Vue】コンポーネントにおけるv-show非レンダリングの問題の解決
6701 ワード
質問:
uni-appを使用して開発されたとき、微博のような注目コンポーネントを書いた.機能は、注目されていない文章が
しかし、イベントで
以上のように、注目ボタンをクリックすると
ソリューション:
ネット上で言う強制リフレッシュと強制バインドデータの一部は無効です.
数回のデバッグにより、
解決策は、
コードは次のとおりです.
uni-appを使用して開発されたとき、微博のような注目コンポーネントを書いた.機能は、注目されていない文章が
+
ボタンを表示し、注目された後にボタンが消えたことだ.v-showを使用して書き、変数isFollow
で傍受し、isFollow
は親コンポーネントからprops
を介して伝達される.しかし、イベントで
isFollow
の値を変更した後、viewはレンダリングされず、クリックした後も注目ボタンが存在し、値は確かに変更されたが、viewは再レンダリングされなかったという問題があった.<view class="u-f-ac" v-show="!item.isFollow" @tap="follow">
<view class="icon iconfont icon-zengjia"></view>
</view>
<script>
export default {
props: {
item: Object,
index: Number,
},
methods: {
follow() {
this.item.isFollow = true;
uni.showToast({
title: ' ',
});
}
}
}
</script>
以上のように、注目ボタンをクリックすると
isFollow
の値が変わりますが、ボタンは非表示になりません.ソリューション:
ネット上で言う強制リフレッシュと強制バインドデータの一部は無効です.
数回のデバッグにより、
data()
の値はレンダリングできるが、props
の値はレンダリングできず、データの複雑さに関係なく、ObjectやBooleanはできないことが分かった.解決策は、
data()
ペアでデータを保存してから操作するか、data()
に変数とprops
で変更する必要がある値を作成してバインドし、data()
の変数を使用することです.コードは次のとおりです.
<view class="u-f-ac" v-show="!isFollow" @tap="follow">
<view class="icon iconfont icon-zengjia"></view>
</view>
<script>
export default {
props: {
item: Object,
index: Number,
},
methods: {
follow() {
this.isFollow = true;
uni.showToast({
title: ' ',
});
}
},
data() {
return {
isFollow: this.item.isFollow
}
}
}
</script>