Vue.js 类的Vue计算值未更改

我有以下组成部分：

Vue.component("categorialeaf", {
  props: ["Categoria", "CategoriasFilhas"],
  data: {
        IsOpen: false,
        ClassePrincipal: []
  },
  computed: {
    ObterClassePrincipal() {   
      return this.ClassePrincipal;
    }
  },
  created: function() {
    this.IsOpen = false;
    this.ClassePrincipal = ["glyphicon-plus-sign"];
  },
  methods: {
    HasChildren: function() {
      return this.CategoriasFilhas.length > 0;
    },
    AbrirSubcategorias: function() {
      this.IsOpen = !this.IsOpen;

      console.log("1: ");
      console.log(this.ClassePrincipal);
      this.ClassePrincipal = [];

      if (this.IsOpen) this.ClassePrincipal.push("glyphicon-minus-sign");
      else this.ClassePrincipal.push("glyphicon-plus-sign");

      console.log("2: ");
      console.log(this.ClassePrincipal);

    }
  },
  template: 
  `<li class="branch">
    <i v-if="HasChildren()" class="indicator glyphicon" :class="ObterClassePrincipal"></i>
    <a href="#" @click="AbrirSubcategorias()">{{ Categoria.Name }}</a>
  </li>`
});

Vue.component（“categorialeaf”{
道具：[“Categoria”，“CategoriasFilhas”]，
数据：{
伊索彭：错，
ClassePrincipal:[]
},
计算：{
ObterClassePrincipal（）{
返回此.ClassePrincipal；
}
},
已创建：函数（）{
this.IsOpen=false；
this.ClassePrincipal=[“glyphicon加号”]；
},
方法：{
HasChildren:function（）{
返回this.CategoriasFilhas.length>0；
},
AbrirSubcategorias:function（）{
this.IsOpen=！this.IsOpen；
console.log（“1:”）；
log（this.ClassePrincipal）；
this.ClassePrincipal=[]；
如果（this.IsOpen）this.ClassePrincipal.push（“glyphicon减号”）；
否则这个.ClassePrincipal.push（“glyphicon加号”）；
console.log（“2:”）；
log（this.ClassePrincipal）；
}
},
模板：
`

`
});

当我点击“a”链接调用“AbrirSubcategorias”时，它确实改变了ClassePrincipal值，但是上面的“I”类没有改变。我记得我可以把它放在工作之前，但我不明白为什么计算值忽略了“ClassePrincipal”值的变化。我还试图将“I”类直接绑定到数据，但什么也没有

另一个快速答案是：为什么初始数据值不起作用？“IsOpen”未定义，我需要将其设置为“created”以开始false

有人能帮我弄清楚发生了什么事吗

---

谢谢。

这两个问题的答案都是您没有正确指定

数据

属性；它必须是返回初始状态的函数

data（）{
返回{
伊索彭：错，
ClassePrincipal:[]
};
}

有关更多信息，请参阅

---

另外，

haschilds

作为计算属性而不是方法会更好。

谢谢。我记得我试过做data:function（）{return…}，但它也不起作用。我认为这无论如何都是错误的。再次感谢。为什么我能看到一些人像我一样显示数据代码？“data:{variable:value}}”如果我不输入返回值，它将不会被初始化？当组件在

new Vue（）中立即初始化时，您只能将
data
指定为对象，而不是函数。如果要定义可重用组件，则
data
必须是工厂函数，以便为该组件的每个实例创建新的数据对象实例，否则每个组件实例将共享相同的数据对象！