Vue.js laravel中的错误

Vue.js error in laravel

本文关键字：错误 laravel js Vue      更新时间：2023-09-26

当我尝试使用 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>

我在控制台中收到以下错误：

未

捕获的引用错误：未定义进程（匿名函数）@ vue.common.js：981 vue.common.js：9157 uncatch TypeError： this._init is 不是函数

我做错了什么？

试试这个：

对版本的更改：

  • 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>
相关文章：