skip to Main Content

I have created a character counter for SEO input fields with Vue JS. It worked perfectly in jsfiddle but when I implemented it with Laravel. It isn’t working. It doesn’t give any error, it shows

NaN characters remaining.

where it should show numbers of characters remaining.

My code in jsfiddle which works perfectly in jsfiddle.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
   <label for="title">SEO Description</label><br>
        <textarea v-model="seo_description" value="{{seo_description }}" maxlength="156">
        </textarea>
   <p>Characters remaining:@{{ maxlength-seo_description.length }}</p>
</div>
new Vue({
   el: "#app",
   data: {
   maxlength: 156,
   seo_description: ''
   }
});

My code in laravel view:

<div id="app">
    <label for="title">SEO Description</label><br>
        <textarea name="keyword" v-model="keyword" class="form-control meta" maxlength="255">
        </textarea>
        <p>@{{ maxlength-keyword.length }} characters remaining.</p>
</div>
<script>
var keyword = new Vue({
  el: "#app",
  data: {
    maxlength: 255,
    keyword: ''
  }
});

I tried by copying my code into jsfiddle and run, it works perfeectly there. But it doesn’t run with laravel.

2

Answers


  1. This should be the Problem

    value="{{seo_description }}" 
    

    You are not escaping it for vue.js. You should either do

    value="@{{seo_description}}" 
    

    or

    :value="seo_description"
    

    AND you really need to add seo_description to your data. Always init the default data – even if the value is empty.

    However you do not need this at all actually. Since you bound the value to the model already.

    Last remark: I think you should always wrap your vue.js outputs like

    <p>@{{ maxlength-keyword.length }} characters remaining.</p>
    

    into elements

    <p><span>@{{ maxlength-keyword.length }}</span> characters remaining.</p>
    
    Login or Signup to reply.
  2. in laravel 5.3 vue js has been put into.default together with jquery.

    try to remove app.js or main.js from your main layout or master layout or whatever layout and that time you can use vue instance per blade now.

    make sure to include first vue js dependency from home layout

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search