Vue append element with some questions

Question

Here is my code, and i try to get fruit1 and fruit2 input, but got [object Object] or undefined with alert(this.inputs.id) or alert(this.inputs).

<div id="item">
    <div v-for="input in inputs" :key="input.id">
        <label :for="input.id">{{input.label}}</label>
        <input :id="input.id" v-model="input.value"></input>
    </div>
    <button @click="addInput">Add input</button>
</div>

data() {
    return {
        counter: 1,
        inputs: [{
            id: 'fruit1',
            label: 'Enter Fruit Name',
            value: '123',
        }],
    }
}

addInput() {
    this.inputs.push({
        id: `fruit${++this.counter}`,
        label: 'Enter Fruit Name',
        value: '',
    });
}

this.inputs is an array not object, you can't call this.inputs.id, but this.inputs[0].id — Christhofer Natalius
– Christhofer Natalius, Commented Nov 26, 2018 at 4:38
@ChristhoferNatalius I got it, many thanks with your answer this.inputs[1].id — Tommy Tang
– Tommy Tang, Commented Nov 26, 2018 at 4:47

Christhofer Natalius · Accepted Answer · 2018-11-26 04:43:50Z

1

addInput should be put on methods

this.inputs is an array not object, you can't call this.inputs.id, you should do this.inputs[0].id instead

if you want to get certain input by providing the id, you can do this

methods: {
    addInput() {
        this.inputs.push({
            id: `fruit${++this.counter}`,
            label: 'Enter Fruit Name',
            value: '',
        });
    },
    getInput(id) {
        return this.inputs.find(input => {
            return input.id === id
        }
    }
}

answered Nov 26, 2018 at 4:43

Christhofer Natalius

3,5092 gold badges33 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Vue append element with some questions

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