Vuejs और Vue.set (), अद्यतन सरणी

Question 1

मैं Vuejs के लिए नया हूँ। कुछ बनाया है, लेकिन मुझे नहीं पता कि यह सरल / सही तरीका है।

मैं क्या चाहता हूँ

मैं एक सरणी में कुछ तिथियां चाहता हूं और उन्हें एक घटना पर अपडेट करता हूं। पहले मैंने Vue.set की कोशिश की, लेकिन यह काम नहीं करेगा। अब मेरा एरे आइटम बदलने के बाद:

this.items[index] = val;
this.items.push();

मैं (कुछ भी नहीं है) सरणी के लिए धक्का और यह अद्यतन करेगा .. लेकिन कभी-कभी अंतिम आइटम छिपा दिया जाएगा, किसी भी तरह ... मुझे लगता है कि यह समाधान थोड़ा हैक है, मैं इसे कैसे स्थिर बना सकता हूं?

सरल कोड यहाँ है:

new Vue({
  el: '#app',
  data: {
  	f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
    	console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);
  		this.items[index] = val;
      this.items.push();
      console.log("arr length:  " + this.items.length);
    }
  }
})

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>

स्निपेट का विस्तार करें

Question 2

यदि आप इस तरह से सरणियों में हेरफेर करते हैं तो VueJS राज्य में आपके परिवर्तनों को पिक नहीं कर सकता है।

जैसा कि कॉमन बिगिनर गॉटचैज में बताया गया है , आपको सरणी विधियों का उपयोग करना चाहिए जैसे कि पुश, a[2] = 2स्प्लिस या जो भी और कभी भी इस पर अनुक्रमणिका को संशोधित न करें और न ही किसी सरणी की .length गुण।

new Vue({
  el: '#app',
  data: {
    f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {

    cha: function(index, item, what, count) {
      console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);

      this.items.$set(index, val)
      console.log("arr length:  " + this.items.length);
    }
  }
})

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
      <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button> {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
      <br><br>
    </li>
  </ul>
</div>

स्निपेट का विस्तार करें

Question 3

EDIT 2

के लिए सभी वस्तु परिवर्तन की जरूरत प्रतिक्रियात्मकता उपयोगVue.set(object, prop, value)
सरणी म्यूटेशन के लिए, आप वर्तमान में यहां समर्थित सूची देख सकते हैं

EDIT 1

Vuex के लिए आप करना चाहेंगे Vue.set(state.object, key, value)

मूल

तो बस दूसरों के लिए जो इस सवाल पर आते हैं। यह Vue 2 में कुछ बिंदु पर दिखाई देता है। * उन्होंने this.items.$set(index, val)इसके पक्ष में हटा दिया this.$set(this.items, index, val)।

स्प्लिस अभी भी उपलब्ध है और यहाँ व्यू लिंक में सरणी म्यूटेशन विधियों के लिए एक लिंक है ।

Question 4

जैसा कि पहले कहा गया है - VueJS बस उन ऑपरेशनों (सरणी तत्वों के असाइनमेंट) को ट्रैक नहीं कर सकता है। व्यू के साथ VueJS द्वारा ट्रैक किए गए सभी ऑपरेशन यहां हैं । लेकिन मैं उन्हें एक बार फिर से कॉपी करूंगा:

धक्का दें()
पॉप()
खिसक जाना()
unshift ()
जोड़ ()
प्रकार ()
उलटना()

विकास के दौरान, आप एक समस्या का सामना करते हैं - उस के साथ कैसे रहना है :)।

धक्का ()), पाली (पॉप (), unshift (), प्रकार () और रिवर्स () बहुत सादा और भीतर कुछ मामलों लेकिन मुख्य फोकस झूठ में आपको मदद कर रहे हैं जोड़ () है, जो आप को प्रभावी ढंग से सरणी संशोधित की अनुमति देता है जिसे VueJs द्वारा ट्रैक किया जाएगा। इसलिए मैं कुछ दृष्टिकोण साझा कर सकता हूं, जिनका उपयोग सरणियों के साथ सबसे अधिक काम किया जाता है।

आपको आइटम को ऐरे में बदलने की आवश्यकता है:

// note - findIndex might be replaced with some(), filter(), forEach() 
// or any other function/approach if you need 
// additional browser support, or you might use a polyfill
const index = this.values.findIndex(item => {
          return (replacementItem.id === item.id)
        })
this.values.splice(index, 1, replacementItem)

ध्यान दें: यदि आपको किसी आइटम फ़ील्ड को संशोधित करने की आवश्यकता है - आप इसे बस द्वारा कर सकते हैं:

this.values[index].itemField = newItemFieldValue

और यह VueJS द्वारा ट्रैक किया जाएगा क्योंकि आइटम (ऑब्जेक्ट) फ़ील्ड को ट्रैक किया जाएगा।

आपको सरणी खाली करने की आवश्यकता है:

this.values.splice(0, this.values.length)

वास्तव में आप इस फंक्शन स्प्लिस () - w3schools लिंक के साथ बहुत कुछ कर सकते हैं आप कई रिकॉर्ड जोड़ सकते हैं, कई रिकॉर्ड हटा सकते हैं आदि।

Vue.set () और Vue.delete ()

Vue.set () और Vue.delete () का उपयोग आपके UI संस्करण डेटा में फ़ील्ड जोड़ने के लिए किया जा सकता है। उदाहरण के लिए, आपको अपनी वस्तुओं के भीतर कुछ अतिरिक्त गणना किए गए डेटा या झंडे की आवश्यकता है। आप इसे अपनी वस्तुओं, या वस्तुओं की सूची (लूप में) के लिए कर सकते हैं:

 Vue.set(plan, 'editEnabled', true) //(or this.$set)

और एक्सिस कॉल से पहले एक ही प्रारूप में बैक-एंड पर संपादित डेटा वापस भेजें:

 Vue.delete(plan, 'editEnabled') //(or this.$delete)

Question 5

आपकी समस्या के लिए एक वैकल्पिक - और अधिक हल्का दृष्टिकोण - हो सकता है, बस सरणी को अस्थायी रूप से संपादित करना और फिर पूरे सरणी को वापस आपके चर पर असाइन करना। क्योंकि Vue व्यक्तिगत आइटम नहीं देखता है इसलिए यह पूरे वैरिएबल को अपडेट होते हुए देखेगा।

तो आपको यह काम करना चाहिए:

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

इसके बाद अपने DOM को भी अपडेट करना चाहिए।