vue.js 未在浏览器中显示

Question

TaskList.vue 文件代码 Resoueces/assets/js/components

<template>
    <div>
        <ul>
            <li v-for="task in tasks" v-text="task">
              </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                tasks: []
            };
         },

         created(){
            axios.get('/tasks').then(response => (this.tasks = response.data));
         }
    };
</script>

2.App.js file code **Resources/assets/js**


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('task-list', require('./components/TaskList.vue'));

const app = new Vue({
el: '#app'
});

3. welcome.blade.php file code
<body>

            <div id="app">

                <task-list></task-list>
            </div>
</body>

错误用数字描述，例如 1,2 其不同的错误

1)

[Vue warn]: 属性或方法 "task" 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

2)app.js:13797 GET http://localhost/tasks 404 (Not Found)

3) You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

4) app.js:13822 Uncaught (in promise) Error: Request failed with status code 404
    at createError (app.js:13822)
    at settle (app.js:35254)
    at XMLHttpRequest.handleLoad (app.js:13696)

路线列表： route/web.php

      Route::get('/tasks', function () {

    return Task::latest()->pluck('body');
});
Route::get('/tasks', function () {
    Task::ForceCreate(request(['body']));
});

Answer 1

我认为问题出在这一行

axios.get('/tasks').then(response => (this.tasks = response.data));

Vue 指出，如果您正在使用 this，请不要使用箭头函数，因为 this 在作用域中丢失了。所以试试

axios.get('/tasks').then(function(response){this.tasks = response.data});

看看错误是否解决

Answer 2

您在这里错过了 -，这就是 task 未定义 v-text="task"

的原因

  <li v for="task in tasks"

按照文档建议使用

    <ul>
        <li v-for="task in tasks" v-text="task"></li>
    </ul>

Answer 3

你可以看到使用下面的代码

   // no use "v for" error invalid syntax
<li v for="task in tasks" v-text="task">
              </li>
              
// you use code below
<li v-for="task in tasks" v-text="task">
  {{task}}
</li>
 
------------------------------------------------
//see more about in vuejs
<tr v-for="(task,index) in tasks" v-text="task">
    <td>{{task}}</td>
    <td><span v-on:click="edit(index)">Edit</td>
    <td><span v-on:click="delete(index)">delete</td>
</tr>

vue.js 未在浏览器中显示

vue.js is not showing in browser

laravel

laravel-5

laravel-5.2

vue-component

vuejs2