Re rendering part of component from another component

Question

I want to refresh Header.vue from ConfirmCode Component when calling confirm method

I want to refresh li element of header component when user login with axios ajax

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>

Could you explain what you are trying to achieve by forcing header.vue to re-render? — Varun Agarwal
– Varun Agarwal, Commented Oct 27, 2019 at 14:16
@VarunAgarwal I want to re render li element in header that i wrote here.because user variable is changed it should be updated without refresh whole page — Soheil Ghasemian
– Soheil Ghasemian, Commented Oct 27, 2019 at 14:28

Pierre Said · Accepted Answer · 2019-10-27 16:04:59Z

I would suggest you to take a look at vuex.

With vuex you can create a store where you will keep the user info. You can then access and set the user globally.

store.js

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
});

And then use the store like that :

<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>

You also need to register your store like that :

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

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

I created an example with a store where the user is kept in the localStorage https://codesandbox.io/s/vuex-store-example-39icr?module=%2Fsrc%2Fstore.js

Collectives™ on Stack Overflow

Re rendering part of component from another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related