Question

给定一定的计数时，我需要一些动态选择框。为此，我使用了两个数组-

(i)Array of index (count)
(ii)Array of values.

对于第一个，我使用了v模型（因为它需要一些动态输入框），第二个我只是使用了键并取出了它的值。

我尝试使用第二个数组进行单次迭代，但是它未能通过回归测试。

new Vue({
  el: '#app',
  data: {
    count: 3,
    call: [1, 2, 3],
    sms: [4, 5, 6]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div class="field">
    <label class="label is-small">Total Count</label>
    <div class="control">
      <input type="text" v-model="count">
      <div class="field" v-for="k in Number(count)">
        <select class="input" v-model="call[k]">
          <option value="" selected>Select Call Hours</option>
          <option v-for="hour in 24">{{hour}}</option>
        </select>
        <select class="input" v-model="sms[k]">
          <option value="" selected>Select SMS Hours</option>
          <option v-for="hour in 24">{{hour}}</option>
        </select>
      </div>
    </div>
  </div>
</div>

这是表单的一部分，在新添加数据时可以正常使用，但是在编辑值时不能正确显示。每次都会忽略call和sms数组的第一个索引。

Answer 1

请注意，数组从0开始。因此，一种方法是减去 k-1 。示例：

sms[k - 1]

new Vue({
  el: '#app',
  data: {
    count: 3,
    call: [1, 2, 3],
    sms: [4, 5, 6]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div class="field">
    <label class="label is-small">Total Count</label>
    <div class="control">
      <input type="text" v-model="count">
      <div class="field" v-for="k in Number(count)">
        <select class="input" v-model="call[k - 1]">
          <option value="" selected>Select Call Hours</option>
          <option v-for="hour in 24">{{hour}}</option>
        </select>
        <select class="input" v-model="sms[k - 1]">
          <option value="" selected>Select SMS Hours</option>
          <option v-for="hour in 24">{{hour}}</option>
        </select>
      </div>
    </div>
  </div>
</div>

Vue js-如何在数组内部迭代数组？

1 个答案: