使用 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 时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章
将 Vue.js 安装到 Laravel 后无法加载示例组件
Shopify App-bridge 会话令牌在使用 vue.js 和 Axios 时遇到一些问题?