时间戳

首页 > 解决方案 > 将变量传递给 Vue js 模态组件

javascript - 将变量传递给 Vue js 模态组件

问题描述

在用户单击编辑后，我正在初始化Vue js 模态。

这是模态元素：

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

这是我打开模态的地方

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

这是JS部分

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

我正在尝试将变量传递time给模态。

谁能建议我如何将变量传递给模态？

标签： javascriptvue.js

解决方案

@beforeOpen您可以在事件中将道具绑定到本地数据

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

推荐阅读