多个相同的子组件仅引用最后一个孩子的值 VueJS

Question

<script>
  import {} from 'jquery-datetimepicker/build/jquery.datetimepicker.full.min'
  export default {
    name: 'date-time-picker',
    props: {
      reset: {
        type: Boolean,
        default: false
      },
      passedDate: {
        type: String,
        default: null
      },
      number: {
        type: Number,
        default: 0
      }
    },
    components: {},
    data () {
      return {
        date: this.formatTime()
      }
    },
    computed: {
    },
    methods: {
      emitInputDone () {
        console.log('this is datetime number ' + this.number)
        this.$emit('input', this.date)
      },
      formatTime (ct = null) {
        let newDate = ct ? new Date(ct) : new Date()
        var dd = newDate.getDate()
        var mm = newDate.getMonth() + 1

        var yyyy = newDate.getFullYear()
        if (dd < 10) {
          dd = '0' + dd
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        let ddd = yyyy + '-' + mm + '-' + dd
        return ddd
      }
    },
    watch: {
      reset: function (reset) {
        if (reset) {
          this.date = this.formatTime()
          this.$forceUpdate()
          this.emitInputDone()
          this.$emit('reseted', true)
        }
      },
      passedDate (value) {
        if (value) {
          this.date = this.formatTime(value)
          this.$forceUpdate()
          this.emitInputDone()
        }
      },
      number (value) {

      }
    },
    mounted () {
      let $this = this
      $('.datetime').datetimepicker({
        timepicker: false,
        format: 'Y-m-d',
        onSelectDate: function (ct) {
          let newDate = $this.formatTime(ct)
          $this.date = newDate
          // $this.emitInputDone()
        }
      })
      this.emitInputDone()
    }
  }
</script>

<template>
  <div>
    <b-form-input v-model="date" @input="emitInputDone" @change="emitInputDone" type="text" class="datetime" placeholder="Y/m/d"></b-form-input>
  </div>
</template>

我正在尝试在 VueJS 中制作 StartDate - EndDate 图表，但我的日期时间选择器仅引用最后一个孩子（数字 2）。

<div class="row">
    <div class="col-3">Start Date</div>
    <div class="col-9">
        <div :is="'date-time-picker'" v-model="startDate" :passed-date="startDate" :number="1">
         </div>
    </div>
</div>
<div class="row">
    <div class="col-3">End Date</div>
    <div class="col-9">
        <div :is="'date-time-picker'" v-model="endDate" :passed-date="endDate" :number="2">
        </div>
    </div>
</div>

这是父母处理孩子的原因，还是孩子身上的某些东西使他们引用了相同的输入？

注意：日期时间选择器包含一个 bootstrap-vue b-form-input。

我该如何解决这个问题？

Answer 1

这一行：

$('.datetime').datetimepicker

正在查找具有类 datetime 的第一项并激活它。您应该搜索相对于this.$el