Как получить значения v-модели компонентов v-for, если я выполняю итерации только с числами?

Question

У меня есть v-for компоненты группы форм, я перебрал значение выбора (целое число). Я хочу получить значения повторяющихся v-моделей, но я просто не могу понять, как это правильно

TEMPLATE
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

SCRIPT DATA
   data() {
    return {
      form: {
        jumlahlow: 1,
        checked: [],
        low: []
      } 
    }

Я пытался изменить модель на low [n] или объявить в данных как в объекте {}, но любой из них кажется неопределенным в соответствии с ошибками TypeErrors, которые я предложил.

Как мне получить значения [n]?

РЕДАКТИРОВАТЬ:

Вот полный код:

<code><template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset">
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">
        {{ buttonText }}&nbsp;
        <i class="material-icons">arrow_forward_ios</i>
      </b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}

экспорт по умолчанию {имя: "lowonganForm", data () {return {form: {jumlahlow: 1, проверено: [], low: []}, ниже: [{text: "Pilih Satu ", значение: null, отключено: true}, 1, 2, 3, 4, 5, 6], show: true, target: false, buttonText:" Next "}; }, методы: {onSubmit (evt) {evt.preventDefault (); Оповещение (JSON .stringify (this.form)); // if (this.jumlahlow! == null ||! this.jumlahlow <1) {// this.show = false; //}}, onReset (evt) {evt.preventDefault (); // Сбрасываем значения нашей формы this.form.jumlahlow = null; this.form.checked = []; // Хитрость для сброса / сброса собственного состояния проверки формы браузера this.show = false; this. $ nextTick (() => {this.show = true;}); }}, вычислено: {}};

Answer 1

Вы должны попытаться смоделировать ваши данные так, как вы хотите, чтобы представление отображалось. Если вы хотите иметь список полей ввода, то данные для этих входов должны быть определены в массиве, который предварительно заполнен этими элементами, или когда вам нужно настроить количество элементов, вы должны добавить эти элементы данных в массив. Таким же образом вы избежите проблем с реактивностью.

Вот пример того, что я имею в виду:

new Vue({
  el: '#app',
  
  data: {
    maxCount: 5,
    count: 3,
    items: [],
    data: '',
  },
  
  computed: {
    visibleItems() {
      return this.items.slice(0, this.count)
    }
  },
  
  created() {
    // Define the data upfront so it will be reactive
    for (let i = 0; i < this.maxCount; i++) {
      this.items.push({
        firstName: '',
        lastName: '',
      })
    }
  },
  
  methods: {
    submit() {
      // Transform the data into some JSON that is
      // compatible with your API
      const data = this.visibleItems.map(item => ({
        first_name: item.firstName,
        last_name: item.lastName,
        role: 'user',
      }))
      
      this.data = JSON.stringify(data, null, '  ')
    }
  }
})

  
    Number of people:
    
      {{ i }}
    
  
  
  
    
    
  
  
  Submit
  
  {{ data }}

Answer 2

Попробуйте этот пример.

<div id="app">
  <div>
    <select v-model="jumlahlow">
      <option v-for="i in selects" :key="i">{{ i }}</option>
    </select>
  </div>
  <div v-for="num, index in parseInt(jumlahlow)">
    <input v-model="lows[index].value" />
  </div>
</div>

И JS

new Vue({
  el: '#app',
  data: {
      lows: [
        {
        value: ''
      }
    ],
    jumlahlow: 1,
    selects: [
            1,
        2,
        3,
        4,
        5,
        6
    ]
  },
  watch: {
    jumlahlow: function (val) {
        this.lowsTmp = this.lows;
        this.lows = [];
        for (let i = 0; i < val; i++) {
        const currentVal = typeof this.lowsTmp[i] !== 'undefined' ? this.lowsTmp[i].value : '';
        this.addLow(currentVal);
      }
    }
  },
  methods: {
    addLow: function(val) {
        this.lows.push({ value: val });
    }
  }
})

Непосредственно проверьте здесь: https://jsfiddle.net/abinhho/m3c8r4tj/2/

Answer 3

вы выполняете итерацию v-for="n in parseInt(form.jumlahlow)", но это объект, а v-for работает с массивом, а не с объектами.

Здесь вы можете использовать массив объектов для итерации, например: -

form: [{
    jumlahlow: 1,
    checked: [],
    low: []
  }]

и после этого вам придется написать v-for="n in form", затем попытаться получить доступ к low по form.low