As stated in the title, I am creating a web application using [Vue.js+Nuxt.js+TypeScript], but I have done an operation on the Component variables from Pages, which is applying Layouts, but it is completely blocked, so I would like to ask you a question.
The point of what you want to do is
·I would like to manipulate the class of the list in HogeMenu from pages.
·HogeMenu is read in HogeLayout
·Actually manipulating the value is HogePage
and so on.
I tried using Mixin, but it doesn't work well, so could someone tell me...
As for Vue, I'm a beginner, so I think it's full of tsukkomi, but I'd appreciate it if you could look at it warmly.
/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 extensions Vue {}
</script>
/component/HogeMenu.vue
<template>
<ul>
<lib-bind:class="[isHoge1?'active':']">hoge1</li>
<lib-bind:class="[isHoge2?'active':']">hoge2</li>
<lib-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 extensions 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 extensions Mixins (MenuMixin) {
beforeMount(){
This.activeHoge1();
}
}
</script>
MenuMixin.ts
import Vue from 'vue';
import {Component,Emit} from 'vue-property-decorator';
@Component
export class MenuMixin extensions 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;
}
}
Thank you for your cooperation.
vue.js typescript nuxt.js
It's probably a little hard to operate directly.
For components in layout, I think it would be better to refer to vuex and operate the vuex store on pages side such as as syncData so that the display changes accordingly.
© 2024 OneMinuteCode. All rights reserved.