quasar vue3 input绑定多个v-model值

问题描述

提示：这里描述具体问题：在quasar中使用vue3,数组大小未知，需要动态绑定input数值，来让用户输入。

---

原因分析：

提示：这里填写问题的分析：用v-model和去-input以及v-for来实现。

先创建一个容器，可以是div或其他容器都可以，然后使用v-for循环遍历数组，就可以在页面上动态实现input绑定。

---

解决方案：

提示：这里填写该问题的具体解决方案：

参考代码如下：

    <q-dialog persistent >
      <q-layout view="Lhh lpR fff" container class="bg-white" style="height: 666px;max-width:888px">
        <q-header class="bg-primary">
          <q-toolbar>
            <q-toolbar-title>input v-model</q-toolbar-title>
          </q-toolbar>
        </q-header>
        <q-page-container>
          <q-page padding>
            <q-card>
              <div class="q-pa-md">
                <q-scroll-area>
                  <q-input v-for="(asdasd,index) in inputArr" :key="index" :label="asdasd.key" class="q-py-xs" v-model="asdasd.value"/>
                </q-scroll-area>
              </div>
            </q-card>
          </q-page>
        </q-page-container>
      </q-layout>
    </q-dialog>

export default {
  setup () {
	return {
		 inputArr: [
        {
          key: 'user',
          value: '12'
        },
        {
          key: 'network',
          value: ''
        },
        {
          key: 'password',
          value: ''
        },
        {
          key: 'password',
          value: ''
        }
      ]
	}
  }
     

---

欢迎评论：

提示：欢迎大家在评论区讨论相关问题。
可以关注博主，我会持续更新工作中遇到的技术小砖头，供大家使用。
也可以在评论区告知好的小砖头或技术，我会收录。
还可以指出本博文错误，希望大家不吝赐教。