使用 v-for 在 vc-date-picker > v-text-field 中更改 :value

Posted 2023-02-16

【中文标题】使用 v-for 在 vc-date-picker > v-text-field 中更改 :value

【英文标题】：Change :value in vc-date-picker > v-text-field using v-for

【发布时间】：2021-03-25 10:39:10

【问题描述】：

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

P.S.：我使用 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>

Result 1 Result 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());
      ,
    ,
,

【参考方案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>

【讨论】：

坦克很多！ :) 现在文本字段在一行中，但不幸的是日历不能 100% 工作。正如您在我上一个GIF 中看到的那样，点击的日期不会实时更新，这就是这个插件通常会发生的情况。仅当我直接在第一个文本字段中选择一个区域并且在第二个文本字段中不执行任何操作（反之亦然）时，它才有效。

也许你可以添加一个观察者并尝试强制更新。

在“高级插槽”下的this 页面和API 中有几种方法可能可以解决问题。但我不知道如何将它包含在我的代码中以及如何将它与观察者一起使用。你有什么建议或解决方案吗？

我从手表开始（见问题）。现在我必须以这样的方式实现它，每次我在第一个日历中选择一天时，它也被标记为第二个日历中的开始日期，反之亦然。 @GurkanUgurlu

我看了但找不到最佳答案。我认为在监视值中您可以使用引用并触发 v-calendar 触发的方法