模板中的Vue js类绑定不起作用

Question

使用此示例遇到一些问题： https://vuejs.org/v2/guide/class-and-style.html

我简化了这篇文章的代码：

        var classdata = {
            "isActive": false
        }

        Vue.component('app', {
            props: ['intel'],
            template: '<li v-bind:class="{active: this.isActive}" @click="display(intel)"><p>test</p></li>',
            methods: {
                display: function (name) {
                    this.isActive = true;      
                }
            }               
        })

        var app = new Vue({
          el: '#app',
          data: function() {
            return classdata;
          },
        });

当我控制登录方法时，（this.isActive）它反映了更新的状态，但它没有添加类。当我这样做时，我也注意到了 <li v-bind:class="{active: true}"它有效。

寻找一些清晰度！

Answer 1

尝试引用this而不是app：

display: function (name) {
  this.isActive = true;      
}

此外，如果您在组件级别管理isActive，请在data中使用props进行定义。

修改

要操纵孩子中的data，请将方法传递到props：

Vue.component('app', {
  props: ['intel', 'isActive', 'setActive'],
  template: '<li v-bind:class="{active: isActive}" @click="display(intel)"><p>test</p></li>',
  methods: {
    display: function (name) {
        this.setActive(true);
    }
  }               
})

var app = new Vue({
  el: '#app',
  data: function() {
    return classdata;
  },
  methods: {
    setActive: function (val) {
      this.isActive = val
    }
  }
});