如果模型是数组，则设置初始模型值

Question

如果模型是数组的一部分，我该如何设置模型的默认值？

new Vue({
  data() {
    return {
      value: 1,
      values: [],
      products: [{
        name: 'test 1',
      },
      {
        name: 'test 2',
      }]
    }
  },
  created() {
    for (i = 0; i < products.length; i++) {
      this.values.push(1);
    }
  }
}).$mount('#app')

@import url(https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.css);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.app-content {
  padding:40px 15px;
}

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.js"></script>
<div id="app">
  <div class="app-content">
    <div v-for="(product, index) in products">
      <p>
        {{ product.name }}: {{ values[index] }}
      </p>
      <vue-range-slider v-model="values[index]" min="0" max="10"></vue-range-slider>
    </div>
  </div>
  <div>example of working if not an array:</div>
  <p>
    this works: {{ value }}
  </p>
  <vue-range-slider v-model="value" min="0" max="10"></vue-range-slider>
</div>

正如您从上面的示例中看到的那样，数组滑块在您开始滑动之前不会显示冒号后面的数字，就像您在 data 中设置默认值一样（如单个值）然后它工作正常

所以我的问题是，当模型是一个大小未知的数组时，如何将默认值绑定到模型（产品是从 api 加载的，所以不会总是有 2 个）？

Answer 1

尝试

for (i = 0; i < this.products.length; i++) {
    this.values.push(1);
}

如果模型是数组，则设置初始模型值

Set initial model value if model is an array

javascript

vue.js

vue-component

vuejs2