Question

我有一个主题菜单（例如＆＃34;关于我们＆＃34;，＆＃34;支持＆＃34;）我希望能够告诉现在哪个主题是活跃的。单击某个主题后，它将成为活动主题。可以将其视为将设置活动路由的路由器的替代品。在我的情况下，这是不可能的，因为我在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变量，但我无法进行比较？我尝试过设置默认值，但仍然说它未定义。

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

Answer 2

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

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

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

代替

data: {
  count: 0
}

使用

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

但是我仍然不知道为什么在我的一个组件中，数据作为对象起作用，而在子组件中以其自身的数据作为对象，为什么出现错误count is undefined;

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

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

Answer 3

我制作了一个新的Vue并将其用于全局数据。

const global = new Vue({
    data: function() {
        return {
           activeTopic: ''
        }
    }
});

Vue - 未定义实例数据

3 个答案: