Vuejs এবং Vue.set (), আপডেট অ্যারে

Question 1

আমি ভুয়েজে নতুন কিছু তৈরি করেছেন তবে আমি জানি না এটি সহজ / সঠিক উপায়।

আমি যা চাই

আমি একটি অ্যারে কিছু তারিখ চাই এবং একটি ইভেন্টে তাদের আপডেট। প্রথমে আমি ভ্যূ.সেট চেষ্টা করেছিলাম, তবে তা কার্যকর হয় না। এখন আমার অ্যারে আইটেমটি পরিবর্তন করার পরে:

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

আপনি যদি এই জাতীয় অ্যারে পরিচালনা করেন তবে ভ্যুজেএস রাজ্যে আপনার পরিবর্তনগুলি তুলতে পারে না।

হিসাবে ব্যাখ্যা প্রচলিত শিক্ষানবিস Gotchas , আপনি ধাক্কা, সংযুক্ত করান বা যাই হোক না কেন মতো বিন্যাস পদ্ধতি ব্যবহার করা উচিত এবং এই মত ইনডেক্স পরিবর্তন কখনই 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

সম্পাদনা 2

সমস্ত বস্তুর পরিবর্তনের জন্য যা প্রতিক্রিয়াশীলতার ব্যবহার প্রয়োজনVue.set(object, prop, value)
অ্যারে মিউটেশনের জন্য, আপনি বর্তমানে সমর্থিত তালিকার এখানে দেখতে পারেন

সম্পাদনা 1

ভয়েক্সের জন্য আপনি করতে চাইবেন Vue.set(state.object, key, value)

আসল

তাই কেবল এই প্রশ্নে আসা অন্যদের জন্য। এটি ভ্যূ ২ এর কোন এক পর্যায়ে উপস্থিত হয় * * তারা তাদের this.items.$set(index, val)পক্ষে সরিয়েছে this.$set(this.items, index, val)।

স্প্লাইসটি এখনও উপলভ্য এবং এখানে ভ্য লিঙ্কটিতে অ্যারে মিউটেশন পদ্ধতির লিঙ্ক রয়েছে ।

Question 4

যেমন আগেই বলা হয়েছে - ভ্যুজেএস সহজেই সেই ক্রিয়াকলাপগুলি (অ্যারে উপাদানগুলির কার্যভার) ট্র্যাক করতে পারে না। সমস্ত কাজকর্মের যে অ্যারের সঙ্গে VueJS দ্বারা ট্র্যাক করা হয় এখানে । তবে আমি তাদের আবার অনুলিপি করব:

ধাক্কা ()
পপ ()
শিফ্ট ()
আনশিফ্ট ()
বিভাজন ()
সাজান()
বিপরীত ()

উন্নয়নের সময়, আপনি একটি সমস্যার মুখোমুখি হন - কীভাবে তার সাথে বাঁচবেন :)।

পুশ (), পপ (), শিফট (), আনশিফ্ট (), সাজান () এবং বিপরীত () বেশ সহজ এবং কিছু ক্ষেত্রে আপনাকে সহায়তা করে তবে মূল ফোকাসটি স্প্লাইস () এর মধ্যে রয়েছে যা আপনাকে অ্যারে কার্যকরভাবে সংশোধন করতে দেয় যে 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

আইটেম (অবজেক্ট) ক্ষেত্রগুলি ট্র্যাক করার কারণে এটি ভ্যুজেএস দ্বারা অনুসরণ করা হবে।

আপনার অ্যারে খালি করতে হবে:

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

আসলে আপনি এই ফাংশনটি স্প্লাইস () - w3schools লিঙ্কটি দিয়ে আরও অনেক কিছু করতে পারেন আপনি একাধিক রেকর্ড যুক্ত করতে পারেন, একাধিক রেকর্ড মুছতে পারেন ইত্যাদি

Vue.set () এবং Vue.delete ()

Vue.set () এবং Vue.delete () আপনার ডেটা ইউআই সংস্করণে ক্ষেত্র যুক্ত করার জন্য ব্যবহৃত হতে পারে। উদাহরণস্বরূপ, আপনার কিছু বস্তুর মধ্যে অতিরিক্ত অতিরিক্ত গণনা করা ডেটা বা পতাকা প্রয়োজন need আপনি আপনার বস্তুগুলির জন্য বা বস্তুর তালিকার জন্য এটি করতে পারেন (লুপে):

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

অ্যাক্সিয়োস কল করার আগে সম্পাদিত ডেটা একই ফর্ম্যাটে ব্যাক-এন্ডে প্রেরণ করুন:

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

Question 5

একটি বিকল্প - এবং আপনার সমস্যার আরও হালকা ওজনের পদ্ধতির - হতে পারে কেবলমাত্র অস্থায়ীভাবে অ্যারে সম্পাদনা করা এবং তারপরে পুরো অ্যারেটিকে আপনার ভেরিয়েবলের কাছে ফিরিয়ে দেওয়া। কারণ ভ্যু পৃথক আইটেমগুলি না দেখে এটি সম্পূর্ণ পরিবর্তনশীল আপডেট হওয়া দেখবে।

সুতরাং আপনার এটিও কাজ করা উচিত:

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

এটির পরে আপনার ডিওএম আপডেট করা উচিত।