Is it possible to group v-model with a nested array in Vue.js?

Question

I'm trying to do filtering on groups in a vue app. Is it possible to group v-model with a nested array?

I've tried with the below template...

<div id="app">
  <div class="filter__control filter__control--tags">
    <div class="filter__label">Colour</div>
    <div class="filter__list">
      <label><input type="checkbox" v-model="selectedTags[0]" value="Harvest">Harvest</label>
      <label><input type="checkbox" v-model="selectedTags[0]" value="Moss">Moss</label>
      <label><input type="checkbox" v-model="selectedTags[0]" value="Navy">Navy</label>
      <label><input type="checkbox" v-model="selectedTags[0]" value="White">White</label>
    </div>
  </div>

  <div class="filter__control filter__control--tags">
    <div class="filter__label">Size</div>
    <div class="filter__list">
      <label><input type="checkbox" v-model="selectedTags[1]" value="L">L</label>
      <label><input type="checkbox" v-model="selectedTags[1]" value="M">M</label>
      <label><input type="checkbox" v-model="selectedTags[1]" value="S">S</label>
      <label><input type="checkbox" v-model="selectedTags[1]" value="XL">XL</label>
      <label><input type="checkbox" v-model="selectedTags[1]" value="XS">XS</label>
    </div>
  </div>
</div>

And vue instance..

var app = new Vue({
  el: '#app',
  data: {
    selectedTags: []
  },
  watch: {
    selectedTags: function() {
      // I expect the array to look something like...
      this.selectedTags = [
        ["Navy"],
        ["XS", "S"]
      ]
    }
  }
});

I don't think so. Why do you want to?

Bert
– Bert

2017-12-13 23:57:08 +00:00
Commented Dec 13, 2017 at 23:57 — Bert
– Bert, Commented Dec 13, 2017 at 23:57

El Danielo · Accepted Answer · 2017-12-14 00:08:47Z

1

There is no need for the watcher. Just assign them to 2 different parameters of your SelectedTags object.

var app = new Vue({
  el: '#app',
  data: {
    selectedTags: {
      color: [],
      size: [],
    }
  },
  
  // if you need exact format of the tags that you wanted use computed property.
  
  computed: {
    	SelectedTagsArrays: function(){
      	return [this.selectedTags.color, this.selectedTags.size];
      }
    }
});

<div id="app">
  <div class="filter__control filter__control--tags">
    <div class="filter__label">Colour</div>
    <div class="filter__list">
      <label><input type="checkbox" v-model="selectedTags.color" value="Harvest">Harvest</label>
      <label><input type="checkbox" v-model="selectedTags.color" value="Moss">Moss</label>
      <label><input type="checkbox" v-model="selectedTags.color" value="Navy">Navy</label>
      <label><input type="checkbox" v-model="selectedTags.color" value="White">White</label>
    </div>
  </div>

  <div class="filter__control filter__control--tags">
    <div class="filter__label">Size</div>
    <div class="filter__list">
      <label><input type="checkbox" v-model="selectedTags.size" value="L">L</label>
      <label><input type="checkbox" v-model="selectedTags.size" value="M">M</label>
      <label><input type="checkbox" v-model="selectedTags.size" value="S">S</label>
      <label><input type="checkbox" v-model="selectedTags.size" value="XL">XL</label>
      <label><input type="checkbox" v-model="selectedTags.size" value="XS">XS</label>
    </div>
  </div>
</div>

edited Dec 14, 2017 at 0:08

answered Dec 14, 2017 at 0:00

El Danielo

7801 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcnewport Over a year ago

Thanks for your reply. The reason I couldn't go down this route is because I won't know what the groupings are. There could be price, weight etc.

El Danielo Over a year ago

I don't see any problem. Just create data properties dynamically based on data returned form the backend. use this.$set() or Vue.set in order to create reactive data and then iterate v-model based on the same data.

Collectives™ on Stack Overflow

Is it possible to group v-model with a nested array in Vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related