Creating Reusable Components with Vue.js : Button Component
Casey Morris
2959

What if you have a input component that may or may not use a change event? When your component takes a prop it seems that it must use it. To get around that you have to do a undefined check. Is there any optional props?

template lang=”html”>
 <fieldset>
 <label for=”this”>{{label}}</label>
 <input :name=”name” type=”text” v-model=”localValue” @change=”fieldChanged”>
 </fieldset>
</template>

<script>

export default {
 name: ‘field’,
 data () {
 return {
 localValue: ‘’
 }
 },
 props: {
 label: {required: true},
 name: {required: true},
 value: ‘’,
 onChange: {
 type: Function,
 required: false
 }
 },
 methods: {
 fieldChanged(e) {
 if(this.onChange != undefined){
 this.onChange(e);
 }
 }
 }
}

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.