• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

[Vue warn]: Avoid mutating a prop directly

Vue cps12345 8个月前 (08-24) 173次浏览 0个评论

父组件

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

解决

<template>
  <q-drawer
    v-model="internalDrawer"
    show-if-above
    :mini="!internalDrawer|| 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 
      internalDrawer: this.drawer
    };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>

喜欢 (0)

您必须 登录 才能发表评论!