如何在计算方法中改变数据？

Question

我在 Vue 3 上。我有一个 onclick 方法，它应该修改我的道具的值，它是一个布尔值，我尝试了几种方法，我设法进入计算方法，但是值我的道具没有变化

我注册我的数据

data() {
 return {
  showConsommationWindow: false
 }
}

然后我尝试了 3 种方法来更改值，但其中 none 有效。第一个：

<submit-button v-on:click="showConsommationWindow = true" />

第二个：（执行警报但数据值未更改）

<submit-button v-on:click="showConsommation(true)"/>

  methods: {
    showConsommation(boolValue){
        alert('false')
        this.showConsommationWindow = boolValue;
      }
  }

最后一个：

<submit-button v-on:click="showConsommation"/>

  methods: {
    showConsommation(){
      if (!this.showConsommationWindow) {
        alert('false')
        this.showConsommationWindow = true;
        return
      }
      this.showConsommationWindow = false;
    }
  },

我真的不明白为什么我的数据不能变异，谢谢你的帮助。

Answer 1

如果值来自 props，则意味着 parent 将布尔值分配给 component。所以如果你想改变布尔值，你应该这样做：

// in parent

<Component :booleanValue="myBoolean" @changeBooleanValueEvent="changeMyBoolean" />

...

data() {
  return {
    myBoolean: true
  }
}

methods: {
  changeMyBoolean(value) {
    this.myBoolean = value
  }
}

// in component

props: {
  booleanValue: {
    ...
  }
}

methods: {
  showConsommation() {
    this.$emit('changeBooleanValueEvent', false)
  }
}

如何在计算方法中改变数据？

How mutate data in method computed?

methods

mutated

vue.js