尝试动态创建配置屏幕输入到V-For，该V-For创建相同输入的集合

Question

我正在构建一个蓝牙应用程序，控制房间的灯光。我正在做配置，但是卡住了。在用户选择频道的#之后，它为所有频道创建了许多配置。

我的问题是让每个"频道"在形式上是独立的。现在，如果你填充通道1，它也会填充通道2的输入。

链接到行为的PIC

<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>
<q-avatar class="logo">
<img src="~assets/quasar-logo-vertical.svg" >
</q-avatar>
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer  v-model="leftDrawerOpen" side="left" overlay behavior="mobile" elevated>
<q-header elevated class="bg-primary text-white ">
<q-toolbar-title>
<q-avatar class="logo">
<img src="~assets/quasar-logo-vertical.svg" >
</q-avatar>
Settings
</q-toolbar-title>
</q-header>
<q-scroll-area style="height: calc(100% - 150px); margin-top: 50px; border-right: 1px solid #ddd" class="settings bg-white flex flex-center">
<q-list padding class="col col-12">
<q-item clickable v-ripple>
<q-item-section class="full-width">
<q-item-label><strong>Number of Channels</strong></q-item-label>
<q-input
v-model.number="totalChannels"
label="Number of Channels"
type="number"
filled
style="max-width: 200px"
/>
</q-item-section>
</q-item>
<q-item clickable v-ripple v-for="channel in totalChannels" v-bind:channel="configChannel.channel" :key="channel">    
<q-form
@submit="onSubmit"
@reset="onReset"
class="q-gutter-md"
>
<q-item-section class="full-width">
<q-item-label class="text-accent"><strong>Channel {{channel}}</strong></q-item-label>
<q-item>
<q-item-section>
<q-item-label><strong>Channel Name</strong></q-item-label>
<q-input
v-model.string="configChannel.channelName"
label="Channel Name"
type="text"
filled
style="max-width: 200px"
/>
</q-item-section>
</q-item>
<q-item clickable v-ripple class="row">
<q-item-section class="row">
<q-item-label><strong>Number of Lights</strong></q-item-label>
<q-input
v-model.number="configChannel.numLights"
label="Total Number of Lights"
type="number"
filled
style="max-width: 200px"
/>
</q-item-section>
</q-item>
</q-item-section>
</q-form>
</q-item>
</q-list>
</q-scroll-area>

</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import { ref } from 'vue'

export default {
setup () {
const leftDrawerOpen = ref(false)
const configChannel = ref({
channel: Number,
channelName: String,
numLights: Number
})
return {
leftDrawerOpen,
totalChannels: ref(1),
configChannel,
toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
}
}
}
</script>
<style scoped>
</style>

Answer 1

问题是:您使用一个configChannel作为通道总数，因此它们都共享和更新相同的对象。

试题:

使configChannel成为对象数组。configChannel的长度将是用户选择的通道数。

所以，你最终会这样做:

<q-item v-for="c in totalChannels" :key="c">
<input
v-model.string="configChannel[c].name"
label="Channel Name"
/>
<input
v-model.number="configChannel[c].lites"
label="Number of Lights"
/>
</q-item>

configChannel对象示例如下:

[
{ name: 'Super Name', lites: 9292929929292929 },
{ name: 'Small Name', lites: 1 },
]