ホームページ > 記事 > ウェブフロントエンド > vue v-model の動的生成の概要

vue v-model の動的生成の概要

不言オリジナル: 2018-06-30 16:21:191547ブラウズ

この記事では、vue v-model の動的生成に関する関連知識ポイントとサンプルコードを共有します。興味のある方は参考にしてください。

1. 入力ボックスの v-model にバインドされたフィールド名は、バックグラウンドから返されたデータに基づいて動的に生成される必要があります。現時点では、v-model バインドは使用できません。動的にバインドし、サブコンポーネントバインディングを使用して値とイベントを親コンポーネントに渡します。コードは次のとおりです。

//子组件
<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 を通じて親の値を受け取り、データのように直接使用できます。

子コンポーネント内では、$.emit(親コンポーネントのメソッド名, 値) メソッドを通じて値が親コンポーネントに渡され、親コンポーネントは値を取得し、親コンポーネントのイベントをトリガーします。

サブコンポーネントはデータのキャッシュを毎回生成するのではなく、以前に生成されたことがあるかどうかをチェックするため、このメソッドは落とし穴であるように見えます。キャッシュをクリアできない場合は、

<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 の上に Set をバインドします。 v-for traversal の場合、バインディングは配列です。

通常は $ref.name.value を使用して値を取得します

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語に注目してください。 Webサイト！

vue v-model の動的生成の概要

関連記事