CODEWITHSUNDEEP
javascriptvue.jsvuejs2stenciljsvue-props
BobiDaHombre
BobiDaHombre

Reputation: 233

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);
    /* ... */
  }

Upvotes: 2

Views: 433

Answers (1)

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

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>

Upvotes: 3

Related Questions