Vue v-for动态生成多通道配置表单时输入联动填充问题求解

问题原因 #

你当前所有循环渲染的通道表单都共用了同一个configChannel响应式对象，任意输入框修改都会改动这个公共对象的值，所有绑定该对象的输入框自然会同步更新内容。

解决方案 #

1. 将单个通道配置改为数组存储，每个通道对应数组内一个独立的配置对象，实现数据隔离
2. 监听总通道数的变化，自动增减数组内的配置项，保证配置数和通道数匹配
3. 模板循环时绑定对应索引的通道配置，不再共用同一个对象

修改后的完整代码如下：

<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, index) in totalChannels" :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="channels[index].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="channels[index].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, watch } from 'vue'


export default {
  setup () {
    const leftDrawerOpen = ref(false)
    const totalChannels = ref(1)
    // 用数组存储所有通道的独立配置
    const channels = ref([
      {
        channel: 1,
        channelName: '',
        numLights: 0
      }
    ])

    // 监听总通道数变化，同步配置数组
    watch(totalChannels, (newVal) => {
      const currentLen = channels.value.length
      if (newVal > currentLen) {
        // 新增通道，补全配置项
        for (let i = currentLen; i < newVal; i++) {
          channels.value.push({
            channel: i + 1,
            channelName: '',
            numLights: 0
          })
        }
      } else {
        // 减少通道，截取对应长度
        channels.value = channels.value.slice(0, newVal)
      }
    })

    return {
      leftDrawerOpen,
      totalChannels,
      channels,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>
<style scoped>

</style>

后续你需要提交配置时，直接读取channels数组即可拿到所有通道的独立配置。

内容的提问来源于stack exchange，提问作者Russ