Question

我已经开始使用单文件组件与Laravel构建vue.js应用程序。问题在于我的app对象：它是一个DOM，而不是Vue对象，应用程序无法正常工作。

当我启动我的应用程序时，组件正确呈现，vue-devtools识别Vue 2.2.6，evertything似乎以正确的方式工作。

但是当我输入

时

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的索引/索引视图的一部分：

<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' }
        ],
    }
})

Answer 1

在大多数浏览器中，HTML元素的id属性为exposed in the global scope作为变量。因此，当您键入console.log(app)时，它将返回具有id“app”的元素。

您已使用相同的变量名称app为Vue命名。但是你也使用了var，这使得它仅限于包含范围（意思是，不是全局变量）。现在使用大多数构建工具构建应用程序时（例如webpack），您编写的代码包含在包装范围（函数）中。因此，全局无法访问由app导致的new Vue()变量。如果你想让它在全球范围内可访问，你可能会写

window.app = new Vue()

但是，您可能只想重命名它。

window.myApp = new Vue()

如果您打算为app调用模板同样的事情。

Answer 2

尽管如此，您回答的问题是使用

为您的

List<string> name = new List<string>();

while (reader.Read())
{
    name.Add(Convert.ToString(reader["CategoryName"]));
}

变量提供全局范围

app

您的Chrome浏览器中是否有Vue devtools扩展程序？如果没有，请安装它。安装完成后，为了调试，现在将我的Vue实例命名为window.app = new Vue({...});。这是一个链接，你会发现它非常有用。

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

vue app对象不是对象的类型

2 个答案: