CODEWITHSUNDEEP
javascriptvue.js
Bob
Bob

Reputation: 8714

Pass a variable into Vue js modal component

I am initializing Vue js modal after a user clicks on edit.

This is the modal element:

     <modal name="edit-time">
        <div class="row col"">
            <div class="time">
                <div class="form-row mb-3">
                    <div class="col-4">
                        <label for="time">Time</label>
                    </div>
                    <div class="col-8">
                        <input type="time" v-model="time" id="time" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </modal>

And here is where I open the modal

<button @click="showEditModal()" type="button">Edit</button>

And here is the JS part

<script>

    export default {
        name: 'demo',
        components: {
        },
        data () {

        },
        created () {

        },
        computed: {

        },
        methods: {
            showEditModal () {
                time = "15:15";
                this.$modal.show('edit-time', { time: time });
            },
            hideModal () {
                this.$modal.hide('edit-time');
            }
        },
    }
</script>

What I am trying to do it to pass variable time to a modal.

Can anyone suggest how can I pass the variable to a modal?

Upvotes: 1

Views: 922

Answers (1)

ittus
ittus

Reputation: 22393

You can bind props to local data in @beforeOpen event

<template>
    <modal name="edit-time" @before-open="beforeOpen">
      <div class="row col">
          <div class="time">
              <div class="form-row mb-3">
                  <div class="col-4">
                      <label for="time">Time</label>
                  </div>
                  <div class="col-8">
                      <input type="time" 
                        v-model="localTime" 
                        id="time" 
                        class="form-control">
                  </div>
              </div>
          </div>
      </div>
  </modal>
</template>

<script>
export default {
  data() {
    return {
      localTime: null
    }
  },
  methods: {
    beforeOpen(event) {
      this.localTime = event.params.time
    }
  }
}
</script>

Upvotes: 2

Related Questions