reservierte Namen Geben als

Question

Requisiten mir eine Tonne von repetitiven Formulareingaben, die ich in eine Komponente abstrakt möchte. Ich möchte folgendes tun:

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

und haben es wie Code ausspucken unter

<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> 

I 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> 

erstellt haben und diese nicht offensichtlich für so viele Gründe.

Was ist eine einfache Lösung in Vue.js zum Abstrahieren bilden Eingänge in Komponenten und vorbei reservierte Schlüsselwörter als Requisiten?

Answer 1

Wenn Sie V-Modell aus der Eltern auf das Kind übergeben wollen, einfach value als Stütze verwenden und input Ereignis emittieren als in VueJS documentation gezeigt:

<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> 

und verwenden Sie Ihre Komponente in der übergeordneten als solche :

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

Ich habe diesen Code zwar nicht getestet.