使用 Laravel 实现 vue js 时遇到问题答案

【问题标题】：Trouble implementing vue js with Laravel使用 Laravel 实现 vue js 时遇到问题
【发布时间】：2017-06-03 06:30:14
【问题描述】：

我使用 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 一起运行。

【问题讨论】：

旁注：您真的应该考虑将charactersRemaining 设为computed 属性。
我没有安装 gulp 也没有将 vue js 链接到我的 laravel 。我刚刚安装了laravel。我的 vue js 开发工具 chrome 扩展检测到 vue js。所以我认为我不应该将vue js链接到这个laravel。
@ceejayoz 它在小提琴中确实可以这样工作，但不能与 laravel 一起运行，为什么 ???????????
安装 gulp，然后运行 gulp watch，在不同的终端上运行 php artisan serve
尝试在你的 Laravel 应用中实现这个jsbin.com/hiwulabayu/edit?html,js,output

标签： laravel vue.js laravel-5.3 blade vuejs2

【解决方案1】：

在 laravel 5.3 中，vue js 和 jquery 一起放入了.default。

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

确保在主布局中包含第一个 vue js 依赖项

【讨论】：

【解决方案2】：

这应该是问题

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>

【讨论】：