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

Question

我正在构建一个控制房间灯光的蓝牙应用程序。我正在处理配置，但我被卡住了。此人选择频道数量后，它会为所有频道创建那么多配置。

我的问题是让表单中的每个“通道”独立。现在，如果您填写通道 1，它还会填充通道 2 的输入。

link to the pic of the behavior

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

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

Trying to dynamically create a configuration screen Input to a V-For which creates sets of the same inputs

vue.js

quasar-framework

vue-composition-api

尝试：