Skip to content

Vue pass arrow function for input rules to Stancil component

I’m trying to pass arrow function which will work as input rules like in Vuetify So I’m passing rules in array with code:

    <div id="app">
      <test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
      <button @click="value = 'test'">Test</button>
    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) {

Then I want to check It in Stencil component with console log via watcher but It returns undefined:

  @Prop() rules: Array<Function>;
  watchHandler(newValue: string, oldValue: string) {
    /* ... */


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

<test-component :rules.prop="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>