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

I am building a bluetooth app that controls rooms of lights. I am working on the configuration and I am stuck. After the person selects the # of channels it creates that many configs for all channels.

My problem is making each "channel" independent in the form. Right now if you fill in Channel 1 it also populates channels 2's input.

link to the pic of the behavior

<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated >
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar >
            <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 >
        <q-toolbar-title>
          <q-avatar >
            <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" >
        <q-list padding >
          <q-item clickable v-ripple>
            <q-item-section >
              <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"
              
            >
              <q-item-section >
                <q-item-label ><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 >
                <q-item-section >
                  <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>

CodePudding user response：

The problem is: you are using one configChannel for the total number of channels, so they all share and update the same object.

Try:

making configChannel an array of objects. The length of configChannel will be the number of channels the user chose.

So, you end up doing this:

<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>

A sample configChannel object could be like:

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