我有一個關于使用 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自動填充所選日期，但是在方法中不會發生這種情況。在這種情況下如何獲得選擇的日期？
uj5u.com熱心網友回復：
也許您可以嘗試使用資料功能：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473058.html
上一篇：訪問呼叫者組件內的組件引數
下一篇：將自定義類添加到div元素