Question

我想要两个输入字段，分别是name1和name2，name1 = Peter，name2 = Kitty。但是我不知道该怎么处理。

<div v-for="list in item">
    <input type="text" id="name" name="name" v-model="name"></>
    {{list.name}}
</div>

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}

我想在这里

input type =“ text” id =“ name1” name =“ name2” v-model =“ name1”> <-显示彼得

input type =“ text” id =“ name1” name =“ name2” v-model =“ name2”> <-显示小猫

Answer 1

问题出在您的v-model上。您需要将其绑定到item数组中对象的名称属性。

将v-model="name"更改为v-model="list.name"

JSFiddle example

Answer 2

如果要显示多个输入元素，则还应该在多个位置放置数据。例如，可以通过向项目元素添加there is a 10K limit属性来做到这一点：

UPSERTS using MERGE INTOs

over come that USE the 5.0 Beta or official 5.0

Answer 3

<div v-for="list in item">
    <input type="text" v-model="list.name"></>
    {{list.name}}
</div>

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}

Answer 4

<div v-for="list in item" :key="list.id">
    <input type="text" :id="list.name" :name="list.name" :v-model="list.name"/>
    {{ list.name }}
</div>

vue js v-用于带有v-model的输入类型

4 个答案: