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

Posted

技术标签:

【中文标题】使用 Laravel 实现 vue js 时遇到问题【英文标题】:Trouble implementing vue js with Laravel 【发布时间】: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 【参考方案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>

【讨论】:

以上是关于使用 Laravel 实现 vue js 时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Vue Js 分页

将 Vue.js 安装到 Laravel 后无法加载示例组件

Laravel Vue.js 应用程序未运行

Shopify App-bridge 会话令牌在使用 vue.js 和 Axios 时遇到一些问题?

如何从 vue.js axios POST 在 Laravel 中获取 JSON?

Vue.js 获取 Laravel API JSON 数据