Question

好吧，我试图改变＆＃34;变量＆＃34;的值。在Vue中，但当我点击按钮时，他们会在控制台中抛出一条消息：

[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"

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

我的文件.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>

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

Answer 1

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

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

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

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

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

而是根据prop的值使用数据或计算属性。 Vue JS

1 个答案: