Pass a variable into Vue js modal component

Question

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?

ittus · Accepted Answer · 2019-05-08 09:14:11Z

2

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>

answered May 8, 2019 at 9:14

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass a variable into Vue js modal 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