0

表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。

やりたいことの要点としては、
HogeMenuにあるリストのclassをpagesから操作したい。
HogeMenuHogeLayoutの中で読んでいる
・実際に値を操作するのはHogePage
といった感じです。

Mixinを使用してみましたがうまく動作しないため、どなたかご教授いただけないでしょうか。。。

Vueについては初学者のためツッコミどころ満載かと思いますが、暖かい目で見えていただけると幸いです。

/layouts/HogeLayout.vue

<template>
  <HogeMenu />
  <main>
    <nuxt />
  </main>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import HogeMenu from "@/components/HogeMenu.vue";
@Component({
  components: {
    HogeMenu,
  },
})
export default class HogeLayout extends Vue {}
</script>

/component/HogeMenu.vue

<template>
  <ul>
    <li v-bind:class="[isHoge1 ? 'active' : '']">hoge1</li>
    <li v-bind:class="[isHoge2 ? 'active' : '']">hoge2</li>
    <li v-bind:class="[isHoge3 ? 'active' : '']">hoge3</li>
  </ul>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import MenuMixin from "@/assets/ts/MenuMixin";
@Component
export default class HogeMenu extends Mixins(MenuMixin) {}
</script>

/pages/index.vue

<template>
  <div>
    .....
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import MenuMixin from "@/assets/ts/MenuMixin";
import HogeLayout from '@/layouts/HogeLayout.vue';

@Component({
  layout: "HogeLayout",
  components: {
    HogeLayout
  },
})
export default class HogePage extends Mixins(MenuMixin) {
  beforeMount() {
    this.activeHoge1();
  }
}
</script>

MenuMixin.ts

import Vue from 'vue';
import { Component, Emit } from 'vue-property-decorator';

@Component
export class MenuMixin extends Vue {

  isHoge1 = false;
  isHoge2 = false;
  isHoge3 = false;

  @Emit()
  activeHoge1() {
    this.isHoge1 = true;
    this.isHoge2 = false;
    this.isHoge3 = false;
  }

  @Emit()
  activeHoge2() {
    this.isHoge1 = false;
    this.isHoge2 = true;
    this.isHoge3 = false;
  }

  @Emit()
  activeHoge3() {
    this.isHoge1 = false;
    this.isHoge2 = false;
    this.isHoge3 = true;
  }
}

よろしくお願いいたします。

1 件の回答 1

0

直接の操作をするのは、おそらくちょっと辛いです。

layout の中の component は、 vuex を参照するようにして、 pages 側で asyncData などにて vuex の store を操作して、それによって表示が変わるようにするのが良いと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。