vue.js - 无法使用放置在模板数据中的值。只有道具价值有效

Question

我从props. 并依赖它改变类。这是工作代码：

<div class="modal" :class="{'is-active': aa}" >

但是当我尝试根据以下isActive值进行检查时data：

<div class="modal" :class="{'is-active': isActive}" >

没有什么不工作。模态窗口不出现。为什么？

https://jsfiddle.net/tagdjyrL/

aa如果更改为，示例将停止工作isActive

标签： vue.js

Answer 1

isActive从你的移动data到computed.

computed:
{
  isActive() { return this.aa }
}

并编辑您的closeModalWindow：

  closeModalWindow: function()
  {
    this.$emit('my-event', false)
  }

您现在无法直接编辑您的isActive内容，因此只需作为有效负载传递false。

https://jsfiddle.net/tagdjyrL/11/