[Vuejs]-Need some direction with Vue

by

0👍

Speaking generally you could:

  1. have a notes property in your data/state that stored an array of all notes (they must have a category property)
  2. have a category property in your data/state, which would specify the type of category to render
  3. have a category toggler method that takes in the category as a parameter and updates state
  4. conditionally render only those notes whose category property matches the category in state using v-if

0👍

Id recommend learning about state management using Vuex.

Utilizing Vuex you could dynamically load the list of notes that you want to display.

You could write some actions that would get the list of notes you wanted to display, this could be passed the variables required for your request. Once received the action will commit them to a variable in your state.

You can then create a getter for your notes which will be used in the components that need access to the notes. This will dynamically update like a computed function

import http from "../../axios";

const state = {
  // list of notes
  notes: [],
};

const getters = {
  // notes getter
  allnotes: (state) => state.notes,
};

const actions = {
  async fetchNotes({ commit }, variablesRequired) {
    // notes call here. Below would be a http call that you can add you url too.
    // in this case im using a pre set url in axios that i cann append my url to
    // i can then add variables that would allow me to choose between single or all categories

    const { data } = await http.get(`/notes${variablesRequired}`);
    // this will run a mutation and give it the data required
    commit("setnotes", data);
  },
};

const mutations = {
  // mutation commiting it to state
  setnotes: (state, notes) => (state.notes = notes),
};

export default {
  state,
  getters,
  actions,
  mutations,
};

Inside your component that is displaying the notes you can use the Vuex to fetch and get the required notes.
In your mounted call you could run the fetchNotes function and give it the variables depending on what the user has selected.
This would then run the fetch at component mount.

Then in your computed fields call a return of allNotes. This does not need to be wrapped in a computed function but i often do it in case i need to adjust the list, for things like reordering.

<template>
  <!-- little if statement to not render if no notes exist. will stop an itteration over null -->
  <div v-if="allNotesComputed != []" class="notes-container">
      <!-- Create a for loop for every note -->
    <div v-for="notes in allNotesComputed" :key="notes.id" class="notes">
      <!-- Note content here -->
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["allnotes"]),
    // dynamically updates by vuex
    allNotesComputed() {
      return this.allNotes;
    },
  },
  methods: {
      // fetch notes method created in vuex module
    ...mapActions(["fetchNotes"]),
  },
  mounted() {
    // fetch notes only aboout cats. set in api
    this.fetchNotes("/cats");
  },
};
</script>

<style lang="scss" scoped></style>

This list will now dynamically render to what ever notes you have

Overall i think learning about Vuex and state management will be extremely beneficial to you in creating dynamic content.

Brad from Traversy Media has a good FREE!! crash course in this area

https://youtu.be/5lVQgZzLMHc

EDIT:

You also do not have to use modules with Vuex. I just fined that it becomes easier to manage as your app grows. It allows you to split different areas of your state into more manageable and readable chunks. For reference your store.js file would look like this

import Vue from 'vue'
import Vuex from 'vuex'

import Notes from './modules/notes'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    Notes, 
  },
});

export default store;

Leave a comment