予約された名前を小道具として渡す

Question

私はコンポーネントに抽象化したい繰り返しのフォーム入力をたくさん持っています。私は、次の操作を実行したいと思います：

<InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> 

、それは私がInputElement.vue

<template> 
    <div> 
    <label>{{ inputTitle }}</label> 
    <input v-model="v-model" @blur="@blur" name="name" type="type"> 
    <p style="color:red">Fail</p> 
    </div> 
</template> 

<script> 
export default { 
    props: ['inputTitle', 'v-model', '@blur', 'name', 'type'] 
} 
</script> 

を作成し、これは明らかに非常に多くの理由で失敗した

<template> 
    <div> 
    <label>Your name</label> 
    <input v-model="userame" @blur="validateNotEmpty" name="userame" type="text"> 
    <p style="color:red" v-if="errors.applicantName === false">Fail</p> 

    <label>Phone Number</label> 
    <input v-model="phoneNumber" @blur="validateNotEmpty" v-mask="'###-###-####'" name="phoneNumber" /> 
    <p style="color:red" v-if="errors.phoneNumber === false">Fail</p> 

    <label>Your email</label> 
    <input v-model="email" @blur="validateEmail" name="email" type="email"> 
    <p style="color:red" v-if="errors.email === false">Fail</p> 
    </div> 
</template> 

下のようなコードを吐き出すています。

Vue.jsのフォーム入力を抽象化し、予約済みのキーワードを小道具として渡すという簡単な解決策は何ですか？

Answer 1

あなたは、親から子へ、V-モデルを渡すだけで小道具としてvalueを使用してVueJS documentationに示すようinputイベントを発するようにしたい場合：

<template> 
    <div> 
    <label>{{ inputTitle }}</label> 
    <input v-model="myvalue" @blur="onblur" :name="name" :type="type"> 
    <p style="color:red">Fail</p> 
    </div> 
</template> 

<script> 
export default { 
    props: ['inputTitle', 'value', 'name', 'type'], 
    computed : { 
    myvalue : { 
     set : function (newVal) { 
      this.$emit('input',newVal); 
     }, 
     get : function() { 
      return this.value; 
     } 
    } 
    }, 
    methods : { 
    onblur : function (event) { 
     this.$emit('blur',event); 
    } 
    } 
} 
</script> 

と次のような親であなたのコンポーネントを使用：

<InputElement :input-title="someTitle" v-model="someName" @blur="someFunction" :name="someName" :type="someType"> 

このコードはテストしていません。