[Vuejs]-Vue cloning issue

by

2👍

✅

With Vue, generally you want to think in terms of data. Here is your example revised, such that a widget is rendered for each object in the widgets array.

In this case, the contents of the array don’t make much sense; you would probably want to the properties of each object in the array to match your input fields, but this is just an example to get you going.

var multiple = new Vue({
    el: '#vue',
    data: {
      widgets:[{}]
    },
    methods: {
        addWidget() {
          this.widgets.push({})      
        },
        removeWidget(widget) {
           this.widgets.splice(this.widgets.findIndex(w => w === widget), 1)            
        }
    }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>

    <h1>Cloning</h1>

    <div id="vue">
      <form @submit.prevent>
        <div id="widgets">
          <div v-for="widget in widgets">
            <div>
              <label for="field1">Field 1:</label>
              <input type="text" name="field1">
            </div>
            <div>
              <label for="field2">Field 2:</label>
              <input type="text" name="field2">
            </div>
            <i class="material-icons delete" @click="removeWidget(widget)">delete</i>
          </div>          
        </div>
        <button @click="addWidget">Add Widget</button>
      </form>
    </div>

For the most part, you want to stay away from manipulating the DOM directly and let Vue do the work for you.

👤Bert

Leave a comment