时间戳

首页 > 解决方案 > 请告诉我如何消除每次更改道具时被覆盖的错误

vue.js - 请告诉我如何消除每次更改道具时被覆盖的错误

问题描述

即使您查看错误，您也不知道是什么原因造成的。
在更改屏幕大小或单击时发生。
它说变量已被重写，但我不知道该怎么办。
我在检查中找不到任何原因或解决方案。
如何解决？

错误信息： 

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: "leftDrawer"

主.vue： 

<template>
  <v-app>
    <!-- ヘッダー -->
    <Header
      v-bind:leftDrawer="leftDrawer"
      v-on:leftChange="leftChange"
    ></Header>

    <LeftSidebar
      v-bind:leftDrawer="leftDrawer"
      v-on:leftChange="leftChange"
    ></LeftSidebar>

  </v-app>
</template>

<script>
  import Header from "./Header.vue";
  import LeftSidebar from "./LeftSidebar.vue";


  export default {
    data() {
      return {
        leftDrawer: false,
      }
    },
    components:{
        'Header' : Header,
        'LeftSidebar' : LeftSidebar,
    },
    methods: {
      leftChange() {
          this.leftDrawer = !this.leftDrawer;
      },
    }
  }
</script>

=======
Header.vue:

<template>
  <v-app-bar color="primary" dark app clipped-left clipped-right>
    <v-app-bar-nav-icon @click.stop="leftChange"></v-app-bar-nav-icon>
  </v-app-bar>
</template>

<script>
  export default {
    methods: {
      leftChange: function(){
        this.$emit('leftChange');
      },
    }
  }
</script>

=========== LeftSidebar.vue:

<template>
  <v-navigation-drawer app v-model="leftDrawer" clipped class="yellow">
  </v-navigation-drawer>
</template>

<script>
  export default {
    props: {
      leftDrawer: Boolean
    }
  }
</script>

标签： vue.jsvuetify.js

解决方案

（我删除了与问题无关的所有道具/属性）

<v-navigation-drawer v-model="leftDrawer">

这是在改变leftDrawer道具。阅读文档以了解 v-model 的实际作用。

试试这个，但我怀疑它会起作用。这取决于如何v-navigation-drawer实现 v-model。同样，这是在文档“自定义组件上的 v-model”中。

<v-navigation-drawer :value="leftDrawer" @input="$emit('leftChange')">

即使您查看错误，您也不知道是什么原因造成的。

取决于你的vue经验。

编辑：我的回答有误。

@input="$emit('input', $event)"应该是@input="$emit('leftChange')"。

因为父组件正在main.vue监听v-on:leftChange="leftChange".LeftSidebar

推荐阅读