I am attempting to implement an arrow function as input rules, similar to the setup in Vuetify at https://vuetifyjs.com/en/api/v-input/#rules. My approach involves passing rules within an array using the following code:
<body>
<div id="app">
<test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
{{value}}
<button @click="value = 'test'">Test</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data() {
return {
label: 'Username',
value: '',
placeholder: 'Write username',
required: v => !!v || 'This field is required',
passwordRule: v => v.length >= 8 || 'Your password is too short',
};
},
methods: {
onValueChange(e) {
console.log(e);
},
},
});
</script>
Next, I aim to verify this in a Stencil component by logging it via watcher, but unfortunately, it is returning undefined:
@Prop() rules: Array<Function>;
@Watch('value')
watchHandler(newValue: string, oldValue: string) {
console.log(this.rules);
/* ... */
}