VueJS - Dynamic repeating component

Question

I have a <filter> component in a .vue file that has some properties to control the filter of a query.

This <filter> can be added / removed on-the-fly as the user needs. It's behavior is very similar to the Google Analytics segmentation filter, or Advanced Custom Fields from WordPress.

The only solution I see is instantiating this component dynamically and iterate over an array of these components inside my main app, but I don't exactly know how to do it.

Vue.component("my-filter", {
  template: "#filterTemplate",
  data: function() {
    return {
      field: null,
      value: null
    }
  },
  mounted: function() {
    this.$emit("filter-created", this);
  },
  methods: {
	  removeFilter: function() {
	    console.log("Remove this filter");
    }
  }
});

var app = new Vue({
  el: "#app",
  data: {
    filtersCount: 5,
    filters: [] // PROBLEM! I can't decrement on my filtersCount and remove the correct filter. Iteration should be over my "filtersCount" property.
  },
  methods: {
    filterCreated: function(filterObj) {
			this.filters.push(filterObj);
    },
    addFilter: function() {
    	this.filtersCount += 1;
    }
  }
});

* {
  font-family: "Helvetica", "mono";
  font-size: 16px;
}

.filterContainer + .filterContainer {
  margin-top: 10px;
}

.filterContainer {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<!-- I shouldn't iterate over an integer value, but over an array of objects to remove the right ones -->
  <my-filter v-on:filter-created="filterCreated" v-for="(index, filter) in filtersCount" :key="index"></my-filter>
  <br>
  <button @click="addFilter">Add filter</button>
</div>
<script type="text/x-template" id="filterTemplate">
  <div class="filterContainer">
    <input type="text" :value="field" placeholder="Field" />
    <input type="text" :value="value" placeholder="Value" />
    <button @click="removeFilter">Remove filter</button>
  </div>
</script>

Answer 1

A few things can be changed to get it working (I'm just assuming what you are looking for!)

First, you don't need a data property for counting filters (filtersCount), you can loop through the filters property.

Second, adding this to the filters property can cause unexpected behaviour because this references the entire Vue component. I would recommend adding plain objects that represent the filter data and pass the data as props. Note: that the index is also passed as a prop which can be referenced and allow the filter to be removed through emitting

And lastly, your v-for seems to be reversed. It should be (filter, index) instead of (index, filter).

Vue.component("my-filter", {
  template: "#filterTemplate",
  props: [
    'field',
    'value', // filter data
    'id',
    'index'   // index that allows this filter to be removed
  ],
  data: function() {
    return {
      field: this.field,
      value: this.value
    }
  },
  methods: {
    removeFilter: function() {
      this.$emit('remove-filter', this.index);
    },
    handleInput: function(prop, e) {
        this.$emit('update-filter', { index: this.index, prop, value: e.target.value });
    }
  }
});

window.vm = new Vue({
  el: "#app",
  data: {
    filters: [
      { id: 1, field: null, value: null },
      { id: 2, field: null, value: null },
      { id: 3, field: null, value: null },
      { id: 4, field: null, value: null },
      { id: 5, field: null, value: null }
    ]
  },
  methods: {
    addFilter: function() {
      var id = Math.max.apply(Math,this.filters.map(function(o){return o.id;})) + 1;
      this.filters.push({ id, field: null, value: null });
    },
    removeFilter: function(index) {
      this.filters.splice(index, 1);
    },
    updateFilter: function(payload) {
      this.filters[payload.index][payload.prop] = payload.value;
    }
  }
});

* {
  font-family: "Helvetica", "mono";
  font-size: 16px;
}

.filterContainer + .filterContainer {
  margin-top: 10px;
}

.filterContainer {
  display: block;
  border: 1px solid black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <button @click="addFilter">Add Filter</button>
  <br><br>
  <my-filter v-for="(filter, index) in filters" :key="index" :field="filter.field" :value="filter.value" :id="filter.id" :index="index" @remove-filter="removeFilter" @update-filter="updateFilter"></my-filter>
</div>

<script type="text/x-template" id="filterTemplate">
  <div class="filterContainer">
    <div>Index: {{ index }}, ID: {{ id }}</div>
    <input type="text" :value="field" placeholder="Field" @input="handleInput('field', $event)" />
    <input type="text" :value="value" placeholder="Value" @input="handleInput('value', $event)" />
    <button @click="removeFilter">Remove filter</button>
  </div>
</script>