CODEWITHSUNDEEP
vue.jsbootstrap-modalvuexrouteparamsbootstrap-vue
mbge9pjb
mbge9pjb

Reputation: 47

Vue.js passing a variable through a modal

I am trying to pass a variable from a Parent (page) component to a Child (modal) component. After reading a few examples, this works fine. The variable in question is brought in from another component as a route param. If i refresh the page, the variable is lost and can no longer be passed to the child. My question is, is the best way to persist this using the store, or is it possible to persist another way if the user refreshed? Any help would be appreciated

Parent

  <b-container>
    <Modal v-show="displayModal" @close="closeModal">
      <template v-slot:body>
        <ExpressionCreate v-show="displayModal" :lender-id="lenderId" @close="closeModal"/>
      </template>
    </Modal>
    <div class="card" style="width: 100%;">
      <div class="card-header">
        <h5>{{this.lenderName}}</h5>
        <b-alert :show="this.loading" variant="info">Loading...</b-alert>
      </div>
      <b-btn block variant="success" @click="showCreateLenderModal">Add Expression</b-btn>

....


  created () {
    this.lenderId = this.$route.params.lenderId

...

    navigate () {
      router.go(-1)
    },
    showCreateLenderModal () {
      this.displayModal = true
    },
    toggleDisplayModal (isShow) {
      this.displayModal = isShow
    },
    async closeModal () {
      this.displayModal = false
    }

Child

   <label>lender id:</label>{{this.lenderId}}

...

  props: {
    lenderId: {
      type: Number
    }
  },

Upvotes: 0

Views: 766

Answers (3)

Mark
Mark

Reputation: 175

In order for the state of application to persist, I recommend that you use vuex to manage the state and use a library that abstracts the persisting to vue in a clean way. One popular library is vuex-persist. https://www.npmjs.com/package/vuex-persist

If you dont want to use a store, VueSession, a package linked here should do the trick

Upvotes: 0

sureshvv
sureshvv

Reputation: 4412

You can use VueSession to persist.

Simply persist your lender_id with

this.$session.set('lender_id', this.lender_id)

and you can get it later as

saved_lender = this.$session.get('lender_id')
if (saved_lender) {
    // handle saved case here
}

Upvotes: 1

Фарид Ахмедов
Фарид Ахмедов

Reputation: 902

You can use query params in URI by doing:

$route.push('/', { query: { param: 3123 } })

This will generate the URL /?param=3123 and this will work after refresh. Or, you can use vuex and vuex-localstorage plugin, that let you persist data in the browser, and you can close the browser and open again and data will be restored.

Upvotes: 0

Related Questions