时间戳

首页 > 解决方案 > 如果我只用数字迭代，我如何获得 v-for 组件的 v-model 值？

vue.js - 如果我只用数字迭代，我如何获得 v-for 组件的 v-model 值？

问题描述

我有 v-for form-group 组件，我迭代了一个选择的值（整数）。我想获得迭代 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: []
      } 
    }

我尝试将模型更改为低 [n] 或将数据中的低声明为对象 {}，但根据我遇到的 TypeErrors，其中任何一个似乎都未定义。

我想如何获得低 [n] 的值？

编辑：

这是完整的代码：

<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 }}</pre>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "lowonganForm",
  data() {
    return {
      form: {
        jumlahlow: 1,
        checked: [],
        low: []
      },
      selow: [
        { text: "Pilih Satu", value: null, disabled: true },
        1,
        2,
        3,
        4,
        5,
        6
      ],
      show: true,
      target: false,
      buttonText: "Next"
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
      //   if (this.jumlahlow !== null || !this.jumlahlow < 1) {
      //     this.show = false;
      //   }
    },
    onReset(evt) {
      evt.preventDefault();
      // Reset our form values
      this.form.jumlahlow = null;
      this.form.checked = [];
      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  },
  computed: {}
};
</script>

标签： vue.jsvuejs2v-forv-model

解决方案

您应该尝试根据您希望如何呈现视图来对数据进行建模。如果你想要一个输入框列表，那么这些输入的数据应该定义在一个预先填充了这些项目的数组中，或者当你需要调整项目的数量时，你应该将这些数据项添加到数组中。您也可以通过这种方式避免反应性问题。

这是我的意思的一个例子：

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, '  ')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    Number of people:
    <select v-model="count">
      <option v-for="i of maxCount" :value="i">{{ i }}</option>
    </select>
  </div>
  
  <div v-for="item of visibleItems">
    <input placeholder="First name" v-model="item.firstName">
    <input placeholder="Last name" v-model="item.lastName">
  </div>
  
  <button @click="submit">Submit</button>
  
  <pre>{{ data }}</pre>
</div>

推荐阅读