更改:vc-date-picker中的值>使用 v-for 的 v-text-field [英] Change :value in vc-date-picker > v-text-field using v-for

问题描述

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

I want :value to change from inputValue.start to inputValue.end automatically. So when I click on the end date it should be updated in the second text field. Likewise, if I select a date range in the second text field, the first text field should also be updated again. At the end of this question you can see the result of both cases.

P.S.:我使用 Vue.js 的 V-Calendar 插件.vc-date-picker 元素来自这个插件.

P.S.: I use the V-Calendar plugin for Vue.js. The vc-date-picker element is from this plugin.

• 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，但为此我必须解决主要问题.

Without v-for and twice v-text-field it works, but I want to use v-for. The reason is that otherwise I can't put the text fields in one line. No matter what I did, it didn't work. It only works with v-for, but for that I have to solve the main problem.

见@Gurkan Ugurlu 的回答.

See answer of @Gurkan Ugurlu.

• 这个临时解决方案的问题:没有实时更新.请参阅 GIF.

• The problem of this temporary solution: No Live Update. See GIF.

我只是输出数据进行测试，它奏效了.每次选择日期范围时，console.log 都会使用当前日期执行.

I just output the data for testing and it worked. Every time you select a date range, console.log is executed with the current dates.

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

推荐答案

你能试试这个吗?希望它有帮助:)

Can you try this? Hope it helps :)

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

这篇关于更改:vc-date-picker中的值>使用 v-for 的 v-text-field的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！