laravel 中的 Vue.js 错误
Posted
技术标签:
【中文标题】laravel 中的 Vue.js 错误【英文标题】：Vue.js error in laravel 【发布时间】：2016-05-08 05:17:24 【问题描述】：当我尝试使用 vue.js 在 Laravel 中运行以下代码时：
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list=" json_encode($locations) "></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">@ item.name </li>
</ul>
</template>
<script>
new Vue(
el: 'body'
)
Vue.component('data',
template: '#ln-data',
props:['list']
)
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.common.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<style>
.newclient
display:none;
</style>
</body>
</html>
我在控制台中收到以下错误：
Uncaught ReferenceError: 进程未定义（匿名函数）@ vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is 不是函数
我做错了什么？
【问题讨论】：
您导入了 vue.common.js（在 NPM 上分发的 CommonJS 包）。将其更改为 vue.js 并查看它是否有效。另外，将您自己的 【参考方案1】：试试这个：
对您的版本的更改：
导入 vue.js 而不是 vue.common.js 将你自己的<script>...</script 移到导入的底部，因为它依赖于 vue.js 导入
开发时开启vue调试模式，更容易发现错误。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list=" json_encode($locations) "></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">@ item.name </li>
</ul>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
// vuejs debug mode
Vue.config.debug = true; //TODO: Remove in production
new Vue(
el: 'body'
)
Vue.component('data',
template: '#ln-data',
props:['list']
)
</script>
<style>
.newclient
display:none;
</style>
</body>
</html>
【讨论】：
以上是关于laravel 中的 Vue.js 错误的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Vue JS 中使用 Laravel 进行身份验证，以便用户在没有登录的情况下无法从 URL 进入他的页面
将 Laravel Blade 模板与 Vue JS 和事件监听器一起使用
Laravel 5.6.7 和 Vue.js 中的自定义错误消息，尤其是组件