如何为特定的迭代显示输入字段?

Question

尝试动态显示特定迭代的输入字段-目前它显示所有迭代的输入字段。我还准备了这个stackblitz小提琴

当前，当我点击"add user to Stockholm"时，所有输入字段都会显示，当我输入新用户的名称时，所有输入字段都会被填充。

<div
v-for="(city, a) in cities"
v-bind:key="city.name"
style="margin-bottom: 30px"
>
{{ city.name }}
<div
v-for="(user, b) in city.users"
:class="[user.active ? 'green' : 'red']"
>
{{ user.name }} {{ b }}
<button v-on:click="deleteUser(a, b)">Delelete</button>
<button v-on:click="activateUser(a, b)">
{{ user.active ? 'Unactive' : 'Active' }}
</button>
</div>
<div v-if="addUser" style="margin-top: 10px">
<input type="text" v-model="newUserName" placeholder="name" />&nbsp;
<button v-on:click="addUserToArray(a)" class="green">Add</button><br />
</div>
<br />
<button v-on:click="addUser = !addUser">
{{ addUser ? 'Close' : `Add user to ${city.name}` }}
</button>
</div>
data() {
return {
cities: [
{
name: 'Stockholm',
users: [
{ name: 'Johan', active: true },
{ name: 'Adam', active: false },
{ name: 'Anders', active: false },
],
},
{
name: 'New York',
users: [
{ name: 'Andy', active: true },
{ name: 'Mitchell', active: false },
{ name: 'Steve', active: false },
],
},
{
name: 'San Jose',
users: [
{ name: 'Riana', active: true },
{ name: 'Rita', active: false },
{ name: 'Montgomery', active: false },
],
},
],
addUser: false,
newUserName: '',
};
},

Answer 1

将boolean替换为index:

const app = Vue.createApp({
data(){
return {
cities: [{name: 'Stockholm', users:[{name: 'Johan', active: true}, {name: 'Adam', active: false}, {name: 'Anders', active: false}]}, {name: 'New York', users:[{name: 'Andy', active: true}, {name: 'Mitchell', active: false}, {name: 'Steve', active: false}]}, {name: 'San Jose', users:[{name: 'Riana', active: true}, {name: 'Rita', active: false}, {name: 'Montgomery', active: false}]}],
addUser: null,
newUserName: ''
}
},
computed: {
activeUser: function(){
return this.cities.map((city) => {
return city.users.filter(function(q){
return q.active
})
}).flat()
}
},
methods: {
// 👇 save user index
selectUser(idx) {
this.addUser === idx ? this.addUser = null : this.addUser = idx
},
activateUser(a,b){
this.cities[a].users[b].active = !this.cities[a].users[b].active
},
deleteUser(a,b){
this.cities[a].users.splice(b)
},
addUserToArray(a){
if(this.newUserName == ''){
return false
}
this.cities[a].users.push({name: this.newUserName, active:false})
this.newUserName = ''
this.addUser = false
},
deActiveAllUsers(){
this.cities.map((city) => {
return city.users.forEach(element => element.active = false)
})
},
},
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<h1>All users</h1>
<div v-for="(city, index) in cities" :key="index" style="margin-bottom: 30px">
{{city.name}}
<div v-for="(user, b) in city.users" :class="[user.active ? 'green' : 'red']">
{{user.name}} {{b}}
<button @click="deleteUser(index, b)">Delelete</button>
<button @click="activateUser(index, b)">{{user.active ? 'Unactive' : 'Active'}}</button>
</div>
<!-- 👇 compare user index -->
<div v-if="addUser === index" style="margin-top: 10px;">
<input type="text" v-model="newUserName" placeholder="name"/>&nbsp;
<button @click="addUserToArray(index)" class="green">Add</button><br>
{{newUserName}}
</div>
<br>
<!-- 👇 save user index -->
<button @click="selectUser(index)">{{addUser === index ? 'Close' : `Add user to ${city.name}`}}</button>
</div>
<button @click="deActiveAllUsers">Deactiev all users</button>
<h1>Active users</h1>
<div v-if="activeUser.length > 0">
<div v-for="user in activeUser">{{user.name}}</div>
</div>
<div v-else>
No active users
</div>
</div>

Answer 2

观察/建议:

• As输入字段将根据Add user to city按钮的单击动态。因此，v-model应该是唯一的，这样当您尝试在不同的城市添加用户时，它将不会保留先前输入的v-model值，因为所有用户共享相同的名称。

  模板:

  <input type="text" v-model="newUserName[a]" placeholder="name" />
  

  数据对象:

  newUserName: []
  

• 你可以简单地通过分配index给addUser变量(addUser = a)按钮点击来实现它。

Working Demo:

new Vue({
el: '#app',
data: {
cities: [
{
name: 'Stockholm',
users: [
{ name: 'Johan', active: true },
{ name: 'Adam', active: false },
{ name: 'Anders', active: false },
],
},
{
name: 'New York',
users: [
{ name: 'Andy', active: true },
{ name: 'Mitchell', active: false },
{ name: 'Steve', active: false },
],
},
{
name: 'San Jose',
users: [
{ name: 'Riana', active: true },
{ name: 'Rita', active: false },
{ name: 'Montgomery', active: false },
],
},
],
addUser: null,
newUserName: []
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(city, a) in cities" v-bind:key="city.name" style="margin-bottom: 30px">
{{ city.name }}
<div v-for="(user, b) in city.users" :class="[user.active ? 'green' : 'red']">
{{ user.name }} {{ b }}
<button v-on:click="deleteUser(a, b)">Delelete</button>
<button v-on:click="activateUser(a, b)">
{{ user.active ? 'Unactive' : 'Active' }}
</button>
</div>
<div v-if="addUser === a" style="margin-top: 10px">
<input type="text" v-model="newUserName[a]" placeholder="name" />&nbsp;
<button v-on:click="addUserToArray(a)" class="green">Add</button><br />
</div>
<br/>
<button v-on:click="addUser = a">
{{ addUser === a ? 'Close' : `Add user to ${city.name}` }}
</button>
</div>
</div>