

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

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

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

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

/layouts/HogeLayout.vue

[code]

    <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>
    
[/code]

/component/HogeMenu.vue

[code]

    <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>
    
[/code]

/pages/index.vue

[code]

    <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>
    
[/code]

MenuMixin.ts

[code]

    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;
      }
    }
    
[/code]

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


CC BY-SA 4.0
2022-02-26T02:09:27.523
86579
2022-03-10T06:37:08.530
47269
question
vue.js typescript nuxt.js
Vue.js + Nuxt.js + TypeScript アプリケーションでlayoutで呼び出しているコンポーネントの変数をpagesから操作したい


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

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


CC BY-SA 4.0
2022-03-10T06:37:08.530
86780
2022-03-10T06:37:08.530
754
86579
answer