Vue.js how to collect values from input fields when the number of input fields aren't constant

Question

My use case

I got an array from back-end API which contains input field names.
I render these names along with a input field.

This is my code.

<template>
    <div class="itemGenerate">
        <div>

            <ul>
                <li v-for="identifier in identifiers" :key="identifier">
                <input type="text" value=""/>{{identifier.name}}
                </li>
            </ul>

            <button type="button">Add</button>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      identifiers: [{ name: "Flavour" }, { name: "Size" }, { name: "Color" }]
    };
  }
};

My question is

these input fields are not constant. It'll change in each and every API call (some times it's only color sometimes color,size and another new thing).

I would use v-model if I know the number of input fields, but I cannot use here because it's not predefined.

How do I achieve this using vue.js?

Mehari · Accepted Answer · 2018-05-31 12:33:29Z

3

try this out

<template>
    <div class="itemGenerate">
        <div>

            <ul>
                <li v-for="identifier in identifiers" :key="identifier">
                <input type="text" v-model="item[identifier.name]"/>{{identifier.name}}
                </li>
            </ul>

            <button type="button">Add</button>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      item:{},
      identifiers: [{ name: "Flavour" }, { name: "Size" }, { name: "Color" }]
    };
  }
};

answered May 31, 2018 at 12:33

Mehari

3,2872 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js how to collect values from input fields when the number of input fields aren't constant

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related