javascript - 在vue中使用带有v-model的方法

Question

我有一个关于使用 vue 的 v-model 与方法而不是计算的问题。根据我在这里看到的内容，我知道我们不能完全做到这一点:How to bind a v-model with a method in Vue.js 。但我知道它有一个解决方法。我正在使用 bootstrap vue 的日期选择器，但我认为这个概念不受此限制。

我有两个日期选择器:

<b-form-datepicker id="end-datepicker" v-model="formatISO8601Start" class="mb-2 border-0" hide-header></b-form-datepicker>
<b-form-datepicker id="end-datepicker" v-model="formatISO8601End" class="mb-2 border-0" hide-header></b-form-datepicker>

如果我只有一个日期选择器，那么我只会有一个计算的日期选择器，如下所示:

formatISO8601: {
      get: function() {
          return .....
      },
      set: function(dateSegment) {
          ....
          ....
      }
    },

问题是我不相信我可以对两个日期选择器的 v 模型使用相同的计算结果，因为它们会引用相同的东西。我当然可以创建两个计算值，每个日期选择器一个，但我认为这是不好的做法，因为我正在复制代码。

所以我想也许我可以使用两种方法，而不是使用

v-model="formatISO8601"

，我可以将其替换为:

:value="getISO8601Time('start')" @input="setISO8601Time(????)"

这样我就可以使用作为参数传递的内容来控制逻辑:

<b-form-datepicker id="end-datepicker" :value="getISO8601Time('start')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker>
<b-form-datepicker id="end-datepicker" :value="getISO8601Time('end')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker>

getISO8601Time(time) {
  return ......
}

setISO8601Time(????) {
  ....
  ....
}

这就是我困惑的地方。请注意我将 ?????? 放在哪里。在计算中，set 中的参数，即dateSegment 自动填充所选的日期，但是在方法中不会发生这种情况。在这种情况下如何获得选择的日期？

Answer 1

也许你可以尝试使用数据功能:

new Vue({
  el: "#demo",
  data() {
    return {
      start: null, 
      end: null
    }
  },
  methods: {
    setISO8601Time(e, time) {
      e = new Date(e)
      this[time] = e.toISOString()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <b-form-datepicker id="end-datepicker" 
    :value="start" 
    @input="setISO8601Time($event, 'start')" 
    class="mb-2 border-0" hide-header>
  </b-form-datepicker>
  {{ start }}
  <b-form-datepicker id="end-datepicker" 
    :value="end" 
    @input="setISO8601Time($event, 'end')" 
    class="mb-2 border-0" hide-header>
  </b-form-datepicker>
  {{  end }}
</div>