Question

我用Vue JS为SEO输入字段创建了一个字符计数器。它在jsfiddle中完美运行，但是当我用Laravel实现它时。它不起作用。它没有给出任何错误，它显示

NaN characters remaining.

它应该显示剩余的字符数。

我在jsfiddle中的代码在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: ''
   }
});

laravel视图中的代码：

<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: ''
  }
});

我尝试将我的代码复制到jsfiddle并运行，它在那里完美地工作。但它并没有与laravel一起运行。

Answer 1

这应该是问题

value="{{seo_description }}"

你没有为vue.js转义它。你应该做

value="@{{seo_description}}"

或

:value="seo_description"

你真的需要为你的数据添加seo_description。始终初始化默认数据 - 即使该值为空。

但实际上你根本不需要这个。因为您已将值绑定到模型。

最后一句话：我认为你应该总是包装你的vue.js输出，如

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

到元素

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

Answer 2

在laravel 5.3中，vue js与jquery一起被放入.default。

尝试从主布局或主布局或任何布局中删除app.js或main.js，并且现在可以使用每个刀片的vue实例。

确保包含来自家庭布局的第一个vue js依赖

无法使用Laravel实现vue js

2 个答案: