vue.js 未在浏览器中显示
Posted
技术标签:
【中文标题】vue.js 未在浏览器中显示【英文标题】：vue.js is not showing in browser 【发布时间】：2018-12-02 19:46:44 【问题描述】：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)
[Vue 警告]：属性或方法“任务”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：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']));
);
【问题讨论】：
它说你没有声明属性或方法“任务”，是吗？我们能看到你声明它的代码和你使用它的模板吗？ 我更新了问题-@CarlosSalazar 这是一个app.js require('./bootstrap'); window.Vue = require('vue'); /** * 接下来，我们将创建一个新的 Vue 应用程序实例并将其附加到 * 页面。然后，您可以开始向此应用程序添加组件* 或自定义 JavaScript 脚手架以满足您的独特需求。 */ Vue.component('task-list', require('./components/TaskList.vue')); const app = new Vue( el: '#app' ); Welcome.blade.php 文件你在这里错过了-，这就是为什么task对于v-text="task"没有定义
<li v for="task in tasks"
按照文档建议使用
<ul>
<li v-for="task in tasks" v-text="task"></li>
</ul>
【讨论】：
我更新了这一行 axios.get('/tasks').then(function(response)this.tasks = response.data);但它告诉我同样的错误 -@Carlos Salazar 你把v for改成v-for了吗？
@KinnariPrajapati 您确定显示相同的错误吗？您的错误有 2 条不同的错误消息，1 404 错误和 1 条 task 未找到。这个错误似乎只解决了最后一个错误
@Kinnari : 也分享 laravel 路线
Route::get('/', function () OrderStatusUpdated::dispatch(); return view('welcome'); ); Route::get('/tasks', function () return Task::latest()->pluck('body'); );【参考方案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> 【讨论】：
【参考方案3】：我认为问题出在这一行
axios.get('/tasks').then(response => (this.tasks = response.data));
Vue 声明如果您使用 this，请不要使用箭头函数，因为 this 在范围内丢失。所以试试
axios.get('/tasks').then(function(response)this.tasks = response.data);
看看错误是否解决
【讨论】：
您需要箭头函数，以便在使用 vue 时正确绑定到本地数据以上是关于vue.js 未在浏览器中显示的主要内容，如果未能解决你的问题，请参考以下文章