javascript - 是否可以在Vue.js中使用嵌套数组对v-model进行分组？

我正在尝试对vue应用程序中的组进行过滤。是否可以使用嵌套数组对v模型进行分组？

我已经尝试过以下模板...

<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>

和vue实例..

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

最佳答案

无需观察者。只需将它们分配给SelectedTags对象的2个不同参数即可。

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>

关于javascript - 是否可以在Vue.js中使用嵌套数组对v-model进行分组？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47803713/