表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。
やりたいことの要点としては、
・HogeMenu
にあるリストのclassをpagesから操作したい。
・HogeMenu
はHogeLayout
の中で読んでいる
・実際に値を操作するのは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;
}
}
よろしくお願いいたします。