কীভাবে কোনও আইটেম Vue.js এ অ্যারে থেকে সরানো যায়

Question 1

আমি vue.js (2) এ নতুন এবং আমি বর্তমানে একটি সাধারণ ইভেন্ট অ্যাপে কাজ করছি। আমি ইভেন্টগুলি যুক্ত করতে পরিচালিত করেছি তবে এখন আমি একটি বোতামে ক্লিকের ভিত্তিতে ইভেন্টগুলি মুছতে চাই।

এইচটিএমএল

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

জেএস (ভ্যু)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

আমি ইভেন্টটি ফাংশনে পৌঁছে দেওয়ার চেষ্টা করেছি এবং স্লাইস ফাংশনটি দিয়ে সেটি মুছে ফেলার চেয়ে আমি ভেবেছিলাম এটি অ্যারে থেকে কিছু ডেটা মুছে ফেলার জন্য কোড code একটি সাধারণ বোতাম এবং অনক্লিক ইভেন্টের সাহায্যে অ্যারে থেকে ডেটা মুছে ফেলার সবচেয়ে ভাল উপায় কী?

Question 2

আপনি spliceএকটি ভুল উপায়ে ব্যবহার করছেন ।

ওভারলোডগুলি হ'ল:

অ্যারে.স্প্লাইস (শুরু)

অ্যারে.স্প্লাইস (শুরু, মুছে ফেলা হিসাব)

অ্যারে.স্প্লাইস (স্টার্ট, ডিলিটকাউন্ট, আইটেমফোরইন্টারআফটারডিলিশন 1, আইটেমফোরইনারেটএফটারডিলিশন 2, ...)

শুরু মানে সূচক যা আপনি শুরু করতে চান তা নয়, আপনি যে উপাদানটি সরাতে চান তা নয়। এবং আপনার দ্বিতীয় প্যারামিটারটি deleteCount1 হিসাবে পাস করা উচিত , যার অর্থ: "আমি সূচি starting শুরু}" থেকে শুরু করে 1 উপাদান মুছতে চাই।

সুতরাং আপনি আরও ভাল সঙ্গে যেতে:

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

এছাড়াও, আপনি একটি প্যারামিটার ব্যবহার করছেন, তাই আপনি এটি সরাসরি না অ্যাক্সেস, সঙ্গে this.event।

তবে এইভাবে আপনি indexOfপ্রতিটি মুছে ফেলার জন্য অপ্রয়োজনীয় সন্ধান করবেন , এটির সমাধানের জন্য আপনি নিজের indexভেরিয়েবলটি সংজ্ঞায়িত করতে পারেন v-forএবং ইভেন্ট ইভেন্টের পরিবর্তে এটি পাস করতে পারেন।

এটাই:

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

এবং:

deleteEvent: function(index) {
  this.events.splice(index, 1);
}

Question 3

আপনি এটিও ব্যবহার করতে পারেন $ মুছুন:

remove (index) {
 this.$delete(this.finds, index)
}

উত্স:

Question 4

ভুলবেন না জুড়তে অনুমতি চাবি অ্যাট্রিবিউট অন্যথায় সবসময় গত আইটেম মুছে ফেলা হবে

অ্যারে থেকে নির্বাচিত আইটেম মোছার সঠিক উপায়:

টেমপ্লেট

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

লিপি

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}

Question 5

আপনি যখন ইনপুট দিয়ে এটি করছেন তখন এটি আরও মজাদার, কারণ সেগুলি আবদ্ধ হওয়া উচিত। Youোকানো এবং মুছার বিকল্পগুলি সহ ভ্যু 2 এ এটি কীভাবে করাতে আগ্রহী, দয়া করে একটি উদাহরণ দেখুন:

দয়া করে দেখে নিন একটি জেএস ফিডাল

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

স্নিপেট প্রসারিত করুন

Question 6

আপনি আইডি মাধ্যমে আইটেম মুছতে পারেন

<button @click="deleteEvent(event.id)">Delete</button>

আপনার জেএস কোডের ভিতরে

deleteEvent(id){
  this.events = this.events.filter((e)=>e.id !== id )
}

ভ্যু একটি পর্যবেক্ষণ করা অ্যারের পরিবর্তনের পদ্ধতিগুলিকে মোড়কে রাখে যাতে সেগুলি দেখার আপডেটগুলিও ট্রিগার করে। আরও তথ্যের জন্য এখানে ক্লিক করুন।

আপনি হয়ত ভাবেন যে এর ফলে ভ্যু বিদ্যমান ডিওএমকে ফেলে দেবে এবং পুরো তালিকাটি পুনরায় রেন্ডার করবে - ভাগ্যক্রমে, ঘটনাটি এমন নয়।

Question 7

<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

এবং আপনার জেএসের জন্য:

this.listaTareas = this.listaTareas.filter(i=>i.id != id)

Question 8

স্প্লাইস নির্দিষ্ট সূচক থেকে উপাদান অপসারণ সেরা। প্রদত্ত উদাহরণটি কনসোলে পরীক্ষা করা হয়।

card = [1, 2, 3, 4];
card.splice(1,1);  // [2]
card   // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)

সূচনা 0 থেকে শুরু হয়।

Question 9

সমস্ত পদ্ধতি একসাথে কেন বাদ দেওয়া উচিত নয়:

v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">