Vue - 未定义实例数据答案

【问题标题】：Vue - instance data is not definedVue - 未定义实例数据
【发布时间】：2018-08-13 06:22:41
【问题描述】：

我有一个主题菜单（例如“关于我们”、“支持”），并且我希望能够知道当前处于活动状态的主题。单击主题时，它将成为活动主题。将其视为将设置活动路由的路由器的替代品。在我的情况下这是不可能的，因为我在 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 变量但我无法进行比较？我试过设置一个默认值，但它仍然说它是未定义的。

【问题讨论】：

vue 抛出了正确的错误。 `activeTopic` 没有在任何地方定义供您分配。它应该被定义并作为道具传递给你的组件

标签： vue.js vue-component

【解决方案1】：

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>
    `
});

【讨论】：

但不在组件内部。它应该在这个答案中定义，或者作为道具传递给组件。 Op 只是title，所以组件对activeTopic一无所知
我现在可以将活动类应用于每个主题，但是在组件数据中包含活动主题使其独立并消除了 Vue 实例场景。据我所知，如果进行了更改，通过 props 传递它不会更新组件。不过非常感谢您的回答！
“如果发生更改，通过 props 传递它不会更新组件”组件确实需要 watch 他们的 props 进行更改，是的。

【解决方案2】：

我是 Vue 新手，并且在几个示例中看到数据被定义为对象。

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

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

代替

data: {
  count: 0
}

使用

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

但是我仍然不知道为什么在我的一个组件中，作为对象的数据有效，而在将自己的数据作为对象的子组件中，我收到错误count is undefined；

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

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

【讨论】：