亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3根據(jù)動態(tài)字段綁定v-model的操作代碼

 更新時間：2022年10月12日 14:04:09   作者：明知山_  
最近在學習vue技術，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值，本文通過實例代碼給大家介紹，對Vue3動態(tài)綁定v-model實例代碼感興趣的朋友一起看看吧

因業(yè)務需要用到低代碼，v-model綁定的是隨機生成的

<template>
    <input type="text" v-model="form[key]">
    <button @click="submit">提交</button>
</template>
<script setup>
import { ref } from "vue"
const form = ref({})
const key = ref("input-123456")
const submit = () => {
    console.log(form.value)
}
</script>

在這里插入圖片描述

VUE動態(tài)綁定v-model變量（ui框架iview）

需求

最近在學習vue技術，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值。

UI框架使用的是iview

頁面渲染（子組件）

 <div class="ivu-card-body">
        <Form ref="formInline" v-model="formInline" inline>
          <Row type="flex" justify="end" align="middle">
            <Col
              :xs="24"
              :sm="24"
              :md="6"
              :lg="12"
              :xl="8"
              class="form-item-col"
              v-for="(formItem, formIndex) in formArray"
              :key="formItem.id"
              :value="formIndex"
            >
              <FormItem :label="formItem.label + ':'">
                <Input
                  v-if="formItem.componentType == 'input'"
                  :type="formItem.type"
                  v-model="formInline[formItem.model]"
                  :placeholder="formItem.placeholder"
                >
                </Input>
              </FormItem>
            </Col>
            <Col
              :xs="24"
              :sm="24"
              :md="6"
              :lg="12"
              :xl="8"
              class="form-item-col ivu-btn-right"
            >
              <FormItem>
                <Button
                  type="primary"
                  class="ivu-seach-btn"
                  @click="SeachHanler"
                  >搜索</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
</div>

子組件js

export default {
  name: "TableSearch",
  props: {
    formArray: {
      type: [Object, Array],
      default: () => {}, //這邊是箭頭函數(shù)
    },
  },
  data() {
    var dataInit = {
      formInline: {}, //查詢條件form
    };
    return dataInit;
  },
  watch: {
    // 處理循環(huán)的數(shù)據(jù)  
    formArray() {
       this.formArray.map((item) => {
        if (item && item.model && item.modelValue) {
          this.$set(this.formInline, item.model, item.modelValue);
        }
      });
    },
  },
  methods: {
    //搜索
    SeachHanler() {
      this.$emit("on-search", this.formInline);
    }
  },
  mounted() {},
  created() {},
};

父組件使用

  data() {
    return {
      formArray: [
      {
        componentType: "input",
        type: "text",
        model: "UserName",
        modelValue: "用戶1",
        placeholder: "請輸入用戶名1111",
        label: "用戶名111",
        id: "1",
      },
      {
        componentType: "input",
        type: "text",
        model: "Phone",
        modelValue: "11111",
        placeholder: "請輸入電話",
        label: "電話",
        id: "2",
      }
    ]
    };
  },

遇到的問題以及解決

1.問題： 怎么讓變量值綁定到v-model上
解決： v-model="formInline[formItem.model]"
其中formInline是在form組件上定義的一個對象

2.問題：變量值綁定上去了，怎么去讓數(shù)據(jù)顯示到子組件的“data”中
解決： 通過watch監(jiān)聽 formArray的值變化，然后使用下面的代碼進行反顯，不然會導致v-model綁定的變量無法修改。
this.$set(this.formInline, item.model, item.modelValue);

到此這篇關于Vue3根據(jù)動態(tài)字段綁定v-model的文章就介紹到這了,更多相關Vue3動態(tài)綁定v-model內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論