开发者问题收集

vue-实例数据未定义

2018-03-05
15452
vue.js vue-component

我有一个主题菜单（例如“关于我们”、“支持”），我希望能够知道现在哪个主题处于活动状态。单击某个主题时，该主题将成为活动主题。可以将其视为设置活动路由的路由器的替代品。由于我正在使用 SharePoint 2010...在内容编辑器中工作，因此这在我的情况下是不可能的。因此，我决定在我的 Vue 实例中有一个 activeTopic 变量。

Vue 实例 

new Vue({
    el: '#app',
    data: {
        activeTopic: '',
    }
});

这是因为 activeTopic 必须更新另一个组件并根据活动主题显示一些数据。就像显示子路由的路由器一样。

主题组件 

Vue.component('topic', {
    props: ["title"],
    methods: {
        setActiveTopic: function (title) {
            activeTopic = title;
        },
        isActiveTopic: function (title) {
            return activeTopic == title;
        }
    },
    template: `
        <div v-bind:class="{active: isActiveTopic(title)}" v-on:click="setActiveTopic(title)">
            <p v-text="title"></p>
        </div>
    `
});

当我单击 setActiveTopic 函数时，该函数正常工作；它会更新 activeTopic。但是 isActiveTopic 函数给出了此错误： 

Error in render: "ReferenceError: activeTopic is not defined"

我不明白的是，我可以编辑 activeTopic 变量，但无法进行比较？我尝试设置默认值，但它仍然说它未定义。

2个回答

activeTopic 应通过设置和读取 this.activeTopic 分配给 Vue 组件。照这样，您在每个组件方法中都有两个独立的 activeTopic 变量。

您还需要将 activeTopic 包含在组件的数据块中，而不是 Vue 对象本身中，因为它特定于组件。

（如果有理由将该变量放在 Vue 对象上，您要么希望将其作为 prop 传递给组件，要么直接将其作为 Vue.activeTopic 而不是 this.activeTopic 访问。老实说，我不确定 Vue 是否会将最后一个结构视为组件中的反应值 —— 我从来没有理由尝试这样做，也想不出在哪种情况下这是一种合理的架构。） 

Vue.component('topic', {
    props: ["title"],
    data() { return {
      activeTopic: ''
    }},
    methods: {
        setActiveTopic(title) {
            this.activeTopic = title;
        },
        isActiveTopic(title) {
            return this.activeTopic == title;
        }
    },
    template: `
        <div v-bind:class="{active: isActiveTopic(title)}" v-on:click="setActiveTopic(title)">
            <p v-text="title"></p>
        </div>
    `
});
Daniel Beck
2018-03-05

我是 Vue 新手，在多个示例中看到过将数据定义为对象。

但显然，根据 文档 ，您必须将数据用作返回对象的函数。

这是为了确保所有实例都有自己的数据对象版本，并且不会与所有实例共享。

而不是 

data: {
  count: 0
}

使用 

data: function () {
  return {
    count: 0
  }
}

但是我仍然不知道为什么在我的某个组件中，数据作为对象可以工作，而在具有自己的数据作为对象的子组件中，我收到错误 count is undefined ;

我假设，根元素（由 new Vue({} 定义）必须是单例，并不打算有多个实例。

并且由于组件可以有实例，因此其中的数据需要定义为函数。

Mahesh
2019-05-22