Updating a section of a component using another component

Question

Updating a section of a component using another component

I need to update the Header.vue component from the ConfirmCode Component when the confirm method is called

When a user logs in with axios ajax, I want to refresh the li element of the header component

Appointment.vue:

<send-sms-modal@clickClose="setShowModal"
   @clickSend="hideModal"
   @clickConfirm="showStep=true"
   :step="true"
   :showRegister="showRegister"></send-sms-modal>

SendSMSModal.vue:

<confirm-code :mobile="mobileClone"
:user_id="userId" @clickConfirm="clickConfirm" 
:step="step"></confirm-code>
<script>
clickConfirm() {
     this.$emit('clickConfirm');
}
</script>

ConfirmCode.vue:

<button @click="confirm">
      Confirm
</button>
<script>
confirm() {
  axios.post('/api/confirm_code', {
      confirm_code: this.code,
      user_id: this.user_id}).then(function (response) {
        if (response.data.status == true) {
         window.localStorage.setItem('user', response.data.user);
            this.$emit('clickConfirm');
         }}.bind(this)).catch(function (error) {
          this.errors = error.response.data.errors;
       }.bind(this));
}
</script>

Header.vue:

<li>
      <a v-if="user" href="">
             User profile
      </a>
      <a v-else @click="setShowModal"
        href="javascript:void(0)" class="">
         <span>
              Login
        </span>
     </a>
</li>
<script>
mounted() {
   this.user = window.localStorage.getItem('user');
 }
</script>

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Consider exploring vuex as a solution.

Vuex allows you to create a centralized store for managing user information globally within your Vue application.

Take a look at the example below:


import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  user: window.localStorage.getItem("user")
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    window.localStorage.setItem("user", user);
  }
};

const actions = {
  SetUser({ commit }, user) {
    commit("SET_USER", user);
  }
};

const getters = {
  user(state) {
    return state.user;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

Utilize the Vuex store in your Vue components like so:

<template>
  <div id="app">
    <h1 v-if="user">Hello {{user}}</h1>
    <button @click="SetUser('John')">Set User</button>
  </div>
</template>

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

export default {
  name: "App",
  methods: {
    ...mapActions(["SetUser"])
  },
  computed: {
    ...mapGetters(["user"])
  }
};
</script>

Ensure to register your Vuex store properly:


import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
  el: "#app",
  store,
  components: { App },
  template: "<App/>"
});

For a working example demonstrating the usage of Vuex with localStorage storage, visit: https://codesandbox.io/s/vuex-store-example-39icr?module=%2Fsrc%2Fstore.js

Answer 2

Consider exploring vuex as a solution.

Vuex allows you to create a centralized store for managing user information globally within your Vue application.

Take a look at the example below:


import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  user: window.localStorage.getItem("user")
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    window.localStorage.setItem("user", user);
  }
};

const actions = {
  SetUser({ commit }, user) {
    commit("SET_USER", user);
  }
};

const getters = {
  user(state) {
    return state.user;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

Utilize the Vuex store in your Vue components like so:

<template>
  <div id="app">
    <h1 v-if="user">Hello {{user}}</h1>
    <button @click="SetUser('John')">Set User</button>
  </div>
</template>

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

export default {
  name: "App",
  methods: {
    ...mapActions(["SetUser"])
  },
  computed: {
    ...mapGetters(["user"])
  }
};
</script>

Ensure to register your Vuex store properly:


import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
  el: "#app",
  store,
  components: { App },
  template: "<App/>"
});

For a working example demonstrating the usage of Vuex with localStorage storage, visit: https://codesandbox.io/s/vuex-store-example-39icr?module=%2Fsrc%2Fstore.js

Updating a section of a component using another component

Answer №1

Similar questions

Performing a bulk create operation with Sequelize using an array

Take action upon being added to a collection or being observed

Issue with tensorflow.js multiple regression stochastic gradient descent optimization

What is the best way to recreate WordPress categories using static HTML pages?

When attempting to trigger an error, the unit test will fail to pass

Exploring Vue 3.1+ and its Delimiters: Common Problems for Beginners

Combine collapse and popover in Bootstrap 3 for enhanced functionality

AngularJS $http.get request failing to retrieve data

In Javascript, swap out a particular colored region in an image with a different image

How can I display color without using Winston's color formatter in text?

"jQuery's .each() method is only iterating through the last element in

Tips for eliminating Ref upon exiting the screen on React / React Native?

Terminate the npm build script within a Node.js script

Tips for handling catch errors in fetch POST requests in React Native

Breaking down arrays in Typescript

Ways to update a div periodically with new data fetched from a file - Here's How!

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

Exploring Node's Configuration File Reading Process

Enhancing Azure B2C User Profiles with Vue and MSAL 2.x

Display different images based on user selection in vue.js