我已经开始使用单文件组件使用 Laravel 构建 vue.js 应用程序。问题出在我的应用程序对象上:它是一个 DOM,而不是 Vue 对象,应用程序将无法正常工作。
当我启动我的应用程序时,组件会正确呈现,vue-devtools
识别 Vue 2.2.6,一切似乎都以正确的方式工作。
但是当我打字时
console.log(app)
在 Chrome 控制台中我看到一个 DOM 对象:
<div id="app"></div>
此外,当我尝试仅通过键入来更改标题属性(并且希望在屏幕上看到更改后的 hello
组件)时
app.title = "awesomness"
在控制台中,我的组件不会改变,但只有我的 div#app
:(输入 console.log(app)
<div id="app" title="awesomness"></div>
问题是:为什么?示例如下。
测试组件Hello.vue
<template>
<div>
<p>{{ greeting }} World!</p>
</div>
<script>
module.exports = {
props: ['greeting'],
data: function() {
return {
}
}
}
</script>
<style scoped>
p {
color: red;
font-size: 20px;
}
</style>
我的 Laravel 索引/索引 View 的一部分:
<div id="app">
<hello :greeting="title"></hello>
</div>
最后是我的/resources/assets/js/app.js
文件
import Vue from 'vue'
import Hello from './components/Hello.vue'
Vue.component('hello', Hello);
var app = new Vue({
el: '#app',
data: {
title: 'Hello Vue!',
todos: [
{ text: 'task 1' },
{ text: 'task 2' },
{ text: 'task 3' },
{ text: 'task 4' }
],
}
})
最佳答案
在大多数浏览器中,HTML 元素的 id
属性为 exposed in the global scope作为变量。因此,当您输入 console.log(app)
时,它会返回具有 id“app”的元素。
您已使用相同的变量名称 app
命名您的 Vue。但是您还使用了 var
,这使其仅限于包含范围(即不是全局变量)。当您使用当今大多数构建工具(例如 webpack)构建应用程序时,您编写的代码包含在包装范围(函数)中。因此,您无法全局访问作为 new Vue()
结果的 app
变量。如果你想让它在全局范围内访问,你可能会写
window.app = new Vue()
但是,您可能也想重命名它。
window.myApp = new Vue()
如果您要为应用程序调用相同的模板。
关于laravel-5 - vue app 对象不是对象类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43237103/