Question

TaskList.vue文件代码资源/资产/ js /组件

<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警告]：属性或方法“任务”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：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

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

  <li v for="task in tasks"

用作文档建议

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

Answer 2

您可以看到使用以下代码进行编码

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

Answer 3

我认为问题出在这行

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

Vue指出，如果您使用的是this，请不要使用箭头功能，因为this在范围内会丢失。所以尝试

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

看看错误是否得到解决

vue.js没有显示在浏览器中

3 个答案: