I’m trying to pass arrow function which will work as input rules like in Vuetify https://vuetifyjs.com/en/api/v-input/#rules. So I’m passing rules in array with code:
JavaScript
x
27
27
1
<body>
2
<div id="app">
3
<test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
4
{{value}}
5
<button @click="value = 'test'">Test</button>
6
</div>
7
</body>
8
<script>
9
var app = new Vue({
10
el: '#app',
11
data() {
12
return {
13
label: 'Username',
14
value: '',
15
placeholder: 'Write username',
16
required: v => !!v || 'This field is required',
17
passwordRule: v => v.length >= 8 || 'Your password is too short',
18
};
19
},
20
methods: {
21
onValueChange(e) {
22
console.log(e);
23
},
24
},
25
});
26
</script>
27
Then I want to check It in Stencil component with console log via watcher but It returns undefined:
JavaScript
1
7
1
@Prop() rules: Array<Function>;
2
@Watch('value')
3
watchHandler(newValue: string, oldValue: string) {
4
console.log(this.rules);
5
/* ... */
6
}
7
Advertisement
Answer
When you want to pass a rules prop which can be an array or object then you need to pass it as :rules.prop="[array]"
In your case, it should be something like
JavaScript
1
2
1
<test-component :rules.prop="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
2