更改：使用 v-for 在 vc-date-picker > v-text-field 中的值

Question

我希望:value自动从inputValue.start更改为inputValue.end 。 因此，当我单击结束日期时，它应该在第二个文本字段中更新。 同样，如果我 select 日期范围在第二个文本字段中，则第一个文本字段也应该再次更新。 在这个问题的最后，您可以看到两种情况的结果。

PS：我使用 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" :value="inputValue + '.' + dateF.val"但这不是解决方案。

• 编辑：没有v-for和两次v-text-field它可以工作，但我想使用v-for 。 原因是否则我无法将文本字段放在一行中。 无论我做什么，它都不起作用。 它仅适用于v-for ，但为此我必须解决主要问题。

临时解决方案（使用 v-for）

请参阅@Gurkan Ugurlu 的答案。

• 这个临时解决方案的问题：没有实时更新。 见GIF 。

对于实时更新我的初始代码：

我只是 output 的数据进行测试，它的工作。 每次您 select 一个日期范围时，console.log 都会使用当前日期执行。

 watch: { range: { handler: function () { console.log(this.range.start.toLocaleDateString()); console.log(this.range.end.toLocaleDateString()); }, }, },

Answer 1

你能试试这个吗？ 希望能帮助到你：）

 <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>