[英]Using a method with v-model in vue
我有一個關於使用方法而不是計算的 vue 的v-model
的問題。 我知道根據我在這里看到的內容,我們不能完全做到這一點: How to bind a v-model with a method in Vue.js 。 但我知道它有一個解決方法。 我正在使用 bootstrap vue 的 datepicker,但我認為這個概念不受此限制。
我有兩個日期選擇器:
<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
自動填充所選日期,但是在方法中不會發生這種情況。 在這種情況下如何獲得選擇的日期?
也許您可以嘗試使用數據功能:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.