Question

我正在采取Vue.js的第一步，我非常喜欢它但是我遇到了一个小问题，我希望能帮助解决这个问题。

请在这里查看我的小提琴： https://jsfiddle.net/eywraw8t/8410/

我想要实现的是将一些按钮与其他按钮联系起来，现在，相当硬编码，但是如果单击“设置”按钮“setting1”和“setting2”按钮变为可见。它按预期工作但我希望根据Vue实例来保存按钮可见或不通过this.settings = true（可见）或false（不可见）时的信息。创建按钮时，将根据this.settings值检查按钮是否可见。但是因为我使用：

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : !this.$parent[this.type]}"><slot></slot> {{ status}} {{ !this.$parent[this.type]}}</div>',

每个更改root的this.settings都会导致按钮的可见性发生变化，这很好。但不知怎的，我猜这到处使用这个。$ parent [this.type]很难看。我更喜欢这样的东西：

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : !status}"><slot></slot> {{ status }} {{ !this.$parent[this.type]}}</div>',

或

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : checkVisibility()}"><slot></slot> {{ status }} {{ !this.$parent[this.type]}}</div>',

和checkVisibilty看起来像这样：

function () {
   this.status = this.$parent[this.type];
   return this.status;
}

..但它不起作用。问题是：如何将root的this.settings更新为true / false以影响组件this.status，这样就可以改变组件的外观和行为，而无需在任何地方使用。$ parent [...] 我希望自己明白:) Kalreg。

Answer 1

您应该让status本身成为计算属性。

从data声明中删除它并执行：

computed: {
 status() { return this.$parent[this.type] == undefined ? true : this.$parent[this.type]; }
}

您可以像以下一样使用它：

:class="{isNotVisible : !status}"

JSFiddle here

vue.js - 如何在没有这个的情况下更新父数据更新的子数据。$ parent [...]

1 个答案: