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