VueJS v-if = array [index] काम नहीं कर रहा है

Question

मैं एक घटक बनाना चाहता था जो माउस छवि पर होने पर टेक्स्ट-बॉक्स प्राप्त करता है।

नीचे HTML टेम्पलेट है।

<section class="item-container" v-for="(item, index) in items"> 
    <div class="image-box" @mouseenter="changeStatus(index)"> 
    <img class="image" src="item.link" alt> 
    </div> 
    <div class="text-box" @mouseleave="changeStatus(index)" v-if="show[index]"> 
    <h4>{{ item.name }}</h4> 
    <p>{{ item.content }}</p> 
    </div> 
</section> 

और नीचे app.js

new Vue({ 
    el: '#app', 
    data: { 
    show: [false, false, false], 
    items: [ 
     { 
     name: 'Author 1', 
     content: 'Content 1' 
     }, 
     { 
     name: 'Author 2', 
     content: 'Content 2' 
     }, 
     { 
     name: 'Author 3', 
     content: 'Content 3' 
     } 
    ] 
    }, 
    methods: { 
    changeStatus: function(index) { 
     this.show[index] = !this.show[index]; 
     console.log(this.show); 
     console.log(this.show[index]); // console gets it as expected 
    } 
    } 
}); 

जब मैं कोड ऊपर निष्पादित, मैं प्राप्त कर सकते हैं कि इस शो संपत्ति बदल गया है। हालांकि, वी-अगर अपडेट नहीं किया गया है। क्या हम v-if के लिए सरणी [अनुक्रमणिका] का उपयोग नहीं कर सकते हैं या इसके लिए कोई अन्य कारण है?

Answer 1

समस्या v-if के बारे में नहीं है, ऐसा इसलिए है क्योंकि वू सीधे सरणी तत्व के परिवर्तनों का पता नहीं लगा सकता है, यह जावास्क्रिप्ट की सीमा में से एक है।

इस प्रकार, Vue कुछ सहायक कार्यों इस के लिए, की तरह Vue.set

बदलें इस this.show[index] = !this.show[index]

Vue.set(this.show, index, !this.show[index])

को तो यह काम करना चाहिए प्रदान करता है।

Vue.set एकमात्र समाधान नहीं है, यदि आप जानना चाहते हैं तो इसे पूरा करने के कई तरीके हैं।

आप जावास्क्रिप्ट सरणी के मूल तरीकों का उपयोग कर सकते हैं, वू इन विधियों पर हुक करेगा ताकि यह परिवर्तनों का पता लगा सके।

यहाँ सरणी पूरी तरह से बदलने के लिए है .splice

this.show.splice(index, 1, !this.show[index])

एक और तरीका है के उपयोग के उदाहरण है। आप ES6 का उपयोग कर रहे हैं, तो आप आसानी से सरणी क्लोन करने के लिए प्रसार ऑपरेटर का उपयोग कर सकते हैं: क्योंकि यह एक नई सरणी

this.show = this.show.map((el, i) => 
    i === index ? !el : el 
) 

Answer 2

आप एक जे एस वस्तु का उपयोग कर सकते रिटर्न

this.show[index] = !this.show[index] 
this.show = [...this.show] 

.map भी काम करेंगेसरणी के बजाय और एक ही प्रभाव प्राप्त करें। दूसरे शब्दों में, show: [false, false, false],show: {0:false, 1:false, 2:false}, के साथ प्रतिस्थापित करें।