vue 2 to 3 #1

Merged
gator merged 25 commits from dev into master 2022-12-02 11:23:43 +01:00
2 changed files with 29 additions and 7 deletions
Showing only changes of commit 59b102e5a7 - Show all commits

View File

@ -1,12 +1,13 @@
<template>
<div class="menu-row">
<h2
@click="isHidden = !isHidden"
:id="rowTitle"
@click="updateActiveMenu"
>
{{ rowTitle }}
</h2>
<div
v-if="!isHidden"
v-if="activeMenu === rowTitle"
class="menu-row-content"
>
<slot />
@ -15,6 +16,8 @@
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'MenuRow',
props: {
@ -23,9 +26,21 @@ export default {
default : ''
}
},
data() {
return {
isHidden: true
computed: {
...mapGetters({
activeMenu: 'getActiveMenu',
})
},
methods: {
updateActiveMenu(event) {
const elem = event.target
const value = elem.id
this.$store.commit('setActiveMenu', value)
},
isActive(event) {
const elem = event.target
if (elem.id === this.activeMenu) return true
return false
}
}
}

View File

@ -24,7 +24,8 @@ export default new Vuex.Store({
canvasWidth: 1280,
canvasHeight: 720,
refreshRate: 300,
initial1dState: "onecell"
initial1dState: "onecell",
activeMenu: "Elementary Cellular Automata"
},
mutations: {
update1dSingleRule(state, data) {
@ -50,7 +51,10 @@ export default new Vuex.Store({
},
setInitial1dState(state, data) {
state.initial1dState = data
}
},
setActiveMenu(state, data) {
state.activeMenu = data
},
},
getters: {
getCellProperties(state) {
@ -76,6 +80,9 @@ export default new Vuex.Store({
},
getInitial1dState(state) {
return state.initial1dState
},
getActiveMenu(state) {
return state.activeMenu
}
},
actions: {