【Vue】コンポーネントにおけるv-show非レンダリングの問題の解決


質問:
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>