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: Then I want to check It in Stencil component with console log via watcher but It returns undefined: Answer When you want to pass a rules prop which can be an array or object then you

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 https://vuetifyjs.com/en/api/v-input/#rules. So I’m passing rules in array with 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>

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

  @Prop() rules: Array<Function>;
  @Watch('value')
  watchHandler(newValue: string, oldValue: string) {
    console.log(this.rules);
    /* ... */
  }

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

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

Advertisement

Answer