嘗試動態創建一個配置螢屏InputtoaV-For它創建了一組相同的輸入

我正在構建一個控制燈光房間的藍牙應用程式。我正在處理配置，但被卡住了。在此人選擇頻道數量后，它會為所有頻道創建那么多配置。

我的問題是使每個“通道”在表單中獨立。現在，如果您填充通道 1，它也會填充通道 2 的輸入。

鏈接到行為的圖片

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

uj5u.com熱心網友回復：

問題是：您使用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 },
]

標籤：Vue.js 类星体框架 vue-composition-api

上一篇：vuejs負載僅發出陣列中的第一個元素

下一篇：如何在StoreVuex中加載DOM之前呼叫api？