多个相同的子组件仅引用最后一个子项的值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>

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

注意：date-time-picker包含bootstrap-vue b-form-input。

如何解决此问题？

Answer 1

这一行：

$('.datetime').datetimepicker

找到第一个具有类datetime并激活它的项目。您应该相对于this.$el

进行搜索