而是根据prop的值使用数据或计算属性。 Vue JS [英] Instead, use a data or computed property based on the prop's value. Vue JS

问题描述

好吧，我正在尝试在Vue中更改变量的值，但是当我点击按钮时，他们会在控制台中抛出一条消息：

Well, I'm trying to change a value of "variable" in Vue, but when I click on the button they throw a message in console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "menuOpen"

我不知道如何解决这个问题...

I have no idea how to solve this problem...

我的file.vue：

My file.vue:

<template>
  <button v-on:click="changeValue()">ALTERAR</button>
</template>

<script>

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  methods: {
    changeValue: function () {
      this.menuOpen = !this.menuOpen
    }
  },
}

</script>

任何人都可以帮助我吗？谢谢

Any one can help me? Thanks

推荐答案

警告很清楚。在 changeValue 方法中，您要更改属性的值， menuOpen 。这将在内部更改组件的值，但如果父组件因任何原因必须重新渲染，那么无论内部值是什么，组件都将被覆盖当前状态外部组件。

The warning is pretty clear. In your changeValue method you are changing the value of the property, menuOpen. This will change the value internally to the component, but if the parent component has to re-render for any reason, then whatever the value is inside the component will be overwritten with the current state outside the component.

通常，您可以通过复制内部使用的值来处理此问题。

Typically you handle this by making a copy of the value for internal use.

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  data(){
      return {
          isOpen: this.menuOpen
      }
  },
  methods: {
    changeValue: function () {
      this.isOpen= !this.isOpen
    }
  },
}

如果您需要将值的更改传达回父级，那么您应该 $ emit 更改。

If you need to communicate the change of the value back to the parent, then you should $emit the change.

changeValue: function () {
    this.isOpen= !this.isOpen
    this.$emit('menu-open', this.isOpen)
}

这篇关于而是根据prop的值使用数据或计算属性。 Vue JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！