Question

如何解决此错误消息：

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“抽屉”

父组件：

<template>
  <div>
    <q-header bordered class="bg-grey-11">
      <q-toolbar>
        <q-btn

          @click="drawer = !drawer"

        />
        .....
    </q-header>

    <drawer-main :drawer="drawer"></drawer-main>
  </div>
</template>

<script>
import DrawerMain from "@/components/drawer/DrawerMain";
export default {
  props: ["miniState", "drawerClick"],
  components: {
    DrawerMain
  },
  data() {
    return {
      drawer: false
    };
  }
};
</script>

子组件：

<template>
  <q-drawer
    v-model="drawer"
    show-if-above
    :mini="!drawer || miniState"
    @click.capture="drawerClick"
  >

    <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
      <q-btn
        @click="miniState = true"
      />
    </div>
  </q-drawer>
</template>

<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
  props: ["drawer"],
  components: {
    DrawerNavigation
  },

  data() {
    return { miniState: false };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>

Answer 1

使用@Terry的评论中提到的src或将prop值分配给data属性。

class

[Vue警告]：避免直接变异道具

1 个答案: