CODEWITHSUNDEEP
vue.jsvue-component
Rasim AVCI
Rasim AVCI

Reputation: 143

How to enable disable component in a complex vue app?

I am just new to vue and working on this example Notes application, it can be found below

https://coligo.io/learn-vuex-by-building-notes-app/

My question is how can I change component seen on screen right behind the toolbar. I have read basic guide but I am still behind it.

Lets say I have a button on left side call it message and have another component listing like NotesList and its called MessagesList. So, When I click message button, I want NotesList dissappear and MessageList come instead of that, and vice versa. I do not want NotesList stay as consistent on screen.

Here is App.vue and main.js files, please look in github page for mode code. https://github.com/coligo-io/notes-app-vuejs-vuex

<template>
  <div id="app">
    <toolbar></toolbar>
    <notes-list></notes-list>
    <editor></editor>
  </div>
</template>

<script>
import Toolbar from './Toolbar.vue'
import NotesList from './NotesList.vue'
import Editor from './Editor.vue'
import MessageList from './MessageList.vue'

export default {
  components: {
    Toolbar,
    NotesList,
    Editor,
    MessageList
  }
}
</script>

Main.js

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
  store, // inject store to all children
  el: 'body',
  components: { App }
})

Upvotes: 0

Views: 5844

Answers (1)

Roy J
Roy J

Reputation: 43881

You could do this either by using v-if on each of the components, or by using dynamic components. In either case, your button should toggle a data value which would be used to control which component is displayed.

Upvotes: 1

Related Questions