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
This should be the Problem
You are not escaping it for vue.js. You should either do
or
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
into elements
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