Vue.js laravel 中的错误

Question

当我尝试使用 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: process is not defined(anonymous function) @ vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is not a function

我做错了什么？

Answer 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>

Vue.js laravel 中的错误

Vue.js error in laravel

javascript

php

jquery

laravel

vue.js