vue.js - Vue 附加元素有一些问题

Question

这是我的代码，我尝试获取fruit1和fruit2输入，但是得到[object Object]或未定义的alert（this.inputs.id）或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: '',
    });
}

标签： vue.js

Answer 1

addInput应该戴上methods

this.inputs是一个数组而不是对象，你不能调用this.inputs.id，你应该这样this.inputs[0].id做

如果你想通过提供 id 来获得某些输入，你可以这样做

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
        }
    }
}