मैं VueJS के लिए नया हूँ और अब मुझे एक समस्या का सामना करना पड़ रहा है जिसे मैं समझ नहीं पा रहा हूँ। मैं बटन क्लिक करके तत्वों को गतिशील रूप से जोड़ना और हटाना चाहता हूं। मैं इसे काम करने के लिए कैसे प्राप्त करूं, इसलिए मैं एक विशिष्ट div को हटा सकता हूं और हमेशा अंतिम नहीं जो मैंने जोड़ा है। मैंने इसके साथ बहुत कुछ खेला और अब मुझे एक त्रुटि भी मिलती है [Vue चेतावनी]: आपके पास एक घटक रेंडर फ़ंक्शन में एक अनंत अपडेट लूप हो सकता है। मुझे संभवतः div=index सेट नहीं करना चाहिए और इसके बजाय div.id आदि के साथ काम करना चाहिए। आशा है कि कोई मेरी मदद कर सकता है। धन्यवाद।

https://jsbin.com/zuquwej/edit?html,js,output

  <div id="app">

    <div
      v-for="(div, index) in divs"
      :key="div.id"
      :div="div=index"
    >
      <div class="row">
        <div class="col-12">Div {{div}}</div>
      </div>

      <button
        class="btn btn-danger"
        @click="deleteRow(index)"
      >Delete</button>

    </div>

    <button
      class="btn btn-success"
      @click="addRow"
    >Add row</button>

  </div>
const app = new Vue({

  el: '#app',

 data() {
    return {
      div: 0,
      divs: []
    };
  },

  methods: {
    addRow() {
      this.divs.push({
        div: this.div
      });
      console.log(this.divs);
    },
    deleteRow(index) {
      this.divs.splice(index, 1);
    }
  }

})
1
The_Ice_Man_cometh 10 अप्रैल 2020, 20:25

1 उत्तर

सबसे बढ़िया उत्तर

आपको प्रत्येक ऑब्जेक्ट को एक इंडेक्स स्टोर करना चाहिए जो आप उत्पन्न करते हैं और घटक की divs संपत्ति में स्टोर करते हैं। वैसे, सरणी अनुक्रमणिका के विपरीत, यदि आप इस सरणी से किसी तत्व को विभाजित करते हैं तो यह नहीं बदलेगा। यहां एक कामकाजी उदाहरण है:

<div
      v-for="div in divs"
      :key="div.id"
    >
      <div class="row">
        <div class="col-12">Div {{ div.name }}</div>
      </div>

      <button
        class="btn btn-danger"
        @click="deleteRow(div.id)"
      >Delete</button>

    </div>
const app = new Vue({ 
  el: '#app',

  data() {
    return {
      index: 0,
      divs: []
    };
  },

  methods: {
    addRow() {
      this.divs.push({
        id: this.index,
        name: 'div' + this.index,
      });
      this.index++;
    },
    deleteRow(index) {
      this.divs.splice(index, 1);
    }
  }

})
1
Shizzen83 10 अप्रैल 2020, 17:38