我希望:value自动从inputValue.start更改为inputValue.end。因此，当我点击结束日期时，它应该在第二个文本字段中更新。同样，如果我在第二个文本字段中选择了一个日期范围，第一个文本字段也应该再次更新。在这个问题的末尾，您可以看到这两种情况的结果
附言：我使用Vue.js的V-Calendar插件。vc-date-picker元素来自这个插件。
- HTML：
<v-col v-for="(dateF, date_id) in datesF" :key="date_id + 'A'" cols="6" sm="3">
<vc-date-picker v-model="range" color="red" is-range :input-debounce="500" :min-date="new Date()">
<template v-slot="{ inputValue, inputEvents }">
<v-text-field
:value="inputValue.start"
v-on="inputEvents.start"
:label="dateF.label"
/>
</template>
</vc-date-picker>
</v-col>- 脚本：
<script>
export default {
name: "Home",
data: () => ({
datesF: [
{ label: "Start Date", val: "start" },
{ label: "End Date", val: "end" },
],
range: {
start: new Date(),
end: new Date(),
},
}),
};
</script>结果1结果2
-
我尝试了什么：
:value="inputValue + '.' + dateF.val"，但这不是解决方案。 -
编辑：如果没有
v-for和两次v-text-field，它可以工作，但我想使用v-for。原因是，否则我无法将文本字段放在一行中。不管我做了什么，都没用。它只适用于v-for，但为此我必须解决主要问题。
临时解决方案(带v-for(
见@Gurkan Ugurlu的回答。
- 此临时解决方案的问题：没有实时更新。请参阅GIF
对于实时更新，我的初始代码：
我只是输出数据进行测试，它就起作用了。每次选择日期范围时，console.log都会使用当前日期执行。
watch: {
range: {
handler: function () {
console.log(this.range.start.toLocaleDateString());
console.log(this.range.end.toLocaleDateString());
},
},
},你能试试这个吗？希望有帮助：(
<v-col v-for="(dateF, date_id) in datesF" :key="date_id + 'A'" cols="6" sm="3">
<vc-date-picker v-model="range" color="red" is-range :input-debounce="500" :min-date="new Date()">
<template v-slot="{ inputValue, inputEvents }">
<v-text-field
:value="inputValue[dateF.val]"
v-on="inputEvents[dateF.val]"
:label="dateF.label"
/>
</template>
</vc-date-picker>
</v-col>