首頁  >  文章  >  web前端  >  關於vue v-model動態產生的介紹

關於vue v-model動態產生的介紹

不言
不言原創
2018-06-30 16:21:191550瀏覽

這篇文章跟大家分享了vue v-model動態產生的相關知識點以及實例程式碼,有興趣的朋友參考學習下。

1.input 輸入框v-model 綁定的欄位名稱需要根據後台傳回的資料動態生成,此時就不可以用v-model綁定,而是用傳統的方法value 動態綁定,並且用子元件綁定定向父元件傳遞值和事件。程式碼如下:

//子组件
<template>
 <input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
 <textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>

<script>
export default {
// 接收父组件传递过来的状态(值)
 props: {
  type: Number,  //0 input框 1 文本域
  value: String  // 值有时候编辑状态也是先要获取值的 类似 v-model
 },
 data() {
  return {
   currentValue: this.value
  }
 },
 methods: {
  handleInput(e) {
   let value = e.target.value
   if (value === this.currentValue) {
    return
   } else {
    this.currentValue = value
   }
   this.$emit(&#39;input&#39;, value)
  }
 }
}
</script>
//父组件
//extendTypes 动态获取过来的扩展字段 需要绑定的model 为item.extendKey

<p class="form-group" v-for="item in extendTypes">
  <p>
   <ad-input :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)">
   </ad-input>
  </p>
</p>
// model是动态的,不可以写死,只能在本地先定义一个json extendTypesModel,在获取过来后台的数据之后,本地赋值为空
this.extendTypesModel = {}
if (res && res.code === 0) {
  for (let i = 0; i < res.data.length; i++) {
  this.extendTypesModel[res.data[i].extendKey] = &#39;&#39;
}
  this.extendTypes = res.data
}
//父组件注册的事件
handleUpdate(key, value) {
 this.extendTypesModel[key] = value
}

父子元件透過自訂屬性和自訂事件實作通訊。

父元件自訂屬性v-bind 將父的值傳給子

子元件透過props 接受父的值,接受後可以想data 一樣直接拿來使用。

子元件內部 透過 $.emit( 父元件方法名,value) 方法向父元件傳值,父元件拿到值 並觸發父元件的事件了。

這種方式現在看來是個坑啊因為子元件對資料會有個緩存,每次不是新生成一個input框,而是看之前有沒有生成過,有的話就不生成了,所以資料有個緩存,清除不了簡直換個更簡單的方式

<p class="form-group" v-for="(item, index) in extendTypes">
  <label class="control-label">{{item.extendName}}</label>

  // 既不需要用v-model绑定 也不需要用到子组件 将赋值和取值分开来 而不是用 v-model去绑定,这里取值用到 ref

    <input class="form-control" :value="extendTypesModel[item.extendKey]" @input="handleUpdate(item.extendKey, index)" ref="ipt">
   </p>
   <p class="text-danger" v-if="item.isRequired === 1">*</p>
</p>
handleUpdate(key, index) {
  this.extendTypesModel[key] = this.$refs.ipt[index].value
}

ref綁定值取值ref給元素或者子組件註冊引用信息,綁定在this.ref綁定值取值ref給元素或子元件註冊引用訊息,綁定在this.refs 上邊。如果是v-for 遍歷的話,綁定的就是一個陣列。

一般透過$ref.name.value 來取值

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

實作簡單的vue無限載入指令的方法

vue中v-for載入本機靜態圖片方法

以上是關於vue v-model動態產生的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn