I want two input field with name1 and name2, name1 = Peter, name2= Kitty. But i have not any idea to handle it.
<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: ''
}
}
here i want:
input type="text" id="name1" name="name2" v-model="name1"><--Show Peter
input type="text" id="name1" name="name2" v-model="name2"><--Show Kitty
If you have multiple input elements you want to display, you should also have multiple slots of where you will put the data. For example, you could do it like this, by adding a value property to the item element:
new Vue({
el: '#app',
data: {
items: [
{ name: 'Peter', value: '' },
{ name: 'Kitty', value: '' }
],
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items">
<label>{{item.name}}:</label>
<input type="text" name="item.name" v-model="item.value">
</div>
<!-- Output for debugging purposes -->
{{items}}
</div>The problem is with your v-model. You need to bind it to the name attribute of the object in your item array.
Change v-model="name" to v-model="list.name"
name-${index} name="name" v-model="list.name" />
@input regular expression to check my value and replace model value? Thanks.<div v-for="list in item">
<input type="text" v-model="list.name"></>
{{list.name}}
</div>
data() {
return {
item: [{ name: 'Peter' },{ name: 'Kitty' }],
name: ''
}
}
<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>
