1

Vue.js component is like below.

<template>    
    <div class="container">
        <input type="text" name="first_name" v-validate data-vv-rules="min:12">
    </div>
</template>

<script>
    export default {
        props: ['messages']        
    }
</script>

In the above component, messages property is an object with one property with value like this:

this.messages.Min_Length_First_Name: 3

I am trying to assign it like below.

<input type="text" 
       name="first_name" 
       v-validate 
       data-vv-rules="min:this.messages.Min_Length_First_Name">

But, the input tag renders the min value = this.messages.Min_Length_First_Name instead of numeric value

Am I missing anything?

Pankaj
  • 9,749
  • 32
  • 139
  • 283

1 Answers1

2

You should not use this in the template. It's automatically inferred

  :data-vv-rules="`required|alpha|min:${messages.Min_Length_First_Name}|max:15`
ittus
  • 21,730
  • 5
  • 57
  • 57
  • Please note that there is backtick ` inside the quote. – ittus Apr 23 '19 at 01:11
  • I've updated the answer. Please note there is backtick ` inside `data-vv-rules=""` – ittus Apr 23 '19 at 01:32
  • Can you try `:data-vv-rules`? – ittus Apr 23 '19 at 01:43
  • Can u try this one: https://stackoverflow.com/questions/55801209/failed-to-load-component-in-laravel-5-8 and https://stackoverflow.com/questions/55778163/issue-while-trying-to-pass-json-of-translation-key-value-from-laravel-blade-to-v ? – Pankaj Apr 23 '19 at 02:00