vue.js 使用基于props值的数据或计算(computed)属性

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

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

<script>

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

</script>

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

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

Vue.js相关问答推荐

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

使用nuxt I18N验证规则消息翻译

Vue Js Composition Api 未定义(读取名称)

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

混合使用 React 和 Vue 是个好主意吗？

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试？

Vuejs中的条件a href

Laravel Vue - 如何让 vue 在公共文件夹中查找图像

如何使用 vuex 删除项目？

如何从 bootstrap-vue 模态监听事件？

基于条件的VueJS HTML元素类型

VueJS 通过渲染传递数据

Vue 3 组合 API，如何在 setup() 函数中获取上下文父属性？

在手动安装的 vue 组件中使用 vuex

如何将 Angular 和 Vue 项目合并在一起？

即使在生产模式下构建，VueJS 也会显示开发模式开发模式消息

使用 vuejs 设置响应式屏幕宽度

根据nuxt中的url参数动态加载组件

如何修复套接字 io 中的 400 错误错误请求？

如何在 vue 组件中使用 vuex？