Question

这是我的代码，我尝试获取fruit1和fruit2输入，但使用警报（this.inputs.id）或警报（this.inputs）获得了[object Object]或未定义。

<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: '',
    });
}

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

Vue附加了一些问题的元素

1 个答案: