I'm using Vue 3.2.4, Vuex 4.0.1 and Quasar 3.1.0 for this project.
I have created a custom component in vue as shown below:
<template>
<q-input outlined v-model="inputValue" :label="label" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'RobsInput',
props: {
label: {
type: String,
required: true
},
value: {
type: String,
required: false
}
},
emits: ['input'],
data: function () {
return {
inputValue: (this.value
? this.value
: ''),
open: false
}
},
mounted() {
this.$emit('input', this.inputValue);
},
})
</script>
I was then adding it to a page with some validation needed and pre-emptively added a rules property before actually adding this to my component, as shown here:
<robs-input
v-model="email"
label="Email Address"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Email Address is Required']" />
What's really strange is that the lazy-rules and rules properties instantly began applying to the q-input inside my robs-input without me making any changes to the custom component itself.
Is Vue automatically adding properties to q-input because it's the only element within my component? Seems strange for it to do that, but I can't figure out what else is happening.
Thanks in advance for any answers to this.