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>

जे एस (Vue)

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

});

मैंने फ़ंक्शन को इवेंट पास करने की कोशिश की है और स्लाइस फ़ंक्शन के साथ उस डिलीट करने की तुलना में, मैंने सोचा कि यह सरणी से कुछ डेटा हटाने के लिए कोड था। एक साधारण बटन और ऑनक्लिक ईवेंट के साथ सरणी से डेटा को हटाने के लिए सबसे अच्छा एन सबसे साफ तरीका क्या है?

Question 2

आप spliceगलत तरीके से उपयोग कर रहे हैं।

अधिभार हैं:

array.splice (शुरू)

array.splice (प्रारंभ, हटाएं)

array.splice (प्रारंभ, हटाएं, हटाएं, ItemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

स्टार्ट का मतलब उस इंडेक्स से है जिसे आप शुरू करना चाहते हैं, न कि उस तत्व को जिसे आप हटाना चाहते हैं। और आपको deleteCount1 के रूप में दूसरा पैरामीटर पास करना चाहिए , जिसका अर्थ है: "मैं 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

आप इसका उपयोग भी कर सकते हैं। $ Delete:

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

यह तब भी मजेदार है जब आप इसे इनपुट्स के साथ कर रहे हैं, क्योंकि उन्हें बाध्य होना चाहिए। यदि आप वी 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>

अपने JS कोड के अंदर

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

Vue एक अवलोकन सरणी के उत्परिवर्तन विधियों को लपेटता है ताकि वे दृश्य अपडेट भी ट्रिगर करेंगे। अधिक जानकारी के लिए यहां क्लिक करें ।

आपको लगता है कि यह Vue को मौजूदा DOM को दूर फेंकने और पूरी सूची को फिर से प्रस्तुत करने का कारण बनेगा - सौभाग्य से, ऐसा नहीं है।

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)

startIndex 0 से शुरू होता है।

Question 9

क्यों नहीं सभी विधि को एक साथ छोड़ दें:

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