laravel 中的 Vue.js 错误答案

【问题标题】：Vue.js error in laravellaravel 中的 Vue.js 错误
【发布时间】：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 并查看它是否有效。另外，将您自己的

标签： javascript php jquery laravel 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>

【讨论】：