vue.js - Vue-实例数据未定义

我有一个主题菜单(例如“关于我们”，“支持”)，我希望能够告诉您当前正在活跃的主题。单击一个主题后，它将成为 Activity 主题。可以将其视为设置 Activity 路由的路由器的替代品。就我而言，这是不可能的，因为我正在内容编辑器中使用SharePoint 2010...。因此，我决定在Vue实例中使用 activeTopic 变量。

Vue实例

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

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

主题组件

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变量，但是无法进行比较吗？我尝试设置默认值，但它仍说未定义。

最佳答案

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

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

(如果有理由将该变量放在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>
    `
});