在单个页面上使用多个 v-date-picker [英] Using multiple v-date-pickers on a single page

问题描述

全部:

我正在尝试将多个 Vuetify 日期选择器添加到单个页面.我在 v 菜单中使用它，以便在选择日期时显示在文本字段中.

我遇到的问题是:当我为第一个日期字段选择日期时，一切都按预期工作，但是当我单击以选择第二个日期时，它再次填充第一个日期字段.我有以下几点:

<v-菜单:close-on-content-click="false"v-model="菜单":nudge-right="40"懒惰的过渡=规模过渡"偏移-y全屏宽度min-width="290px" ><v-文本字段插槽 =激活器"v-model="foo.date"标签=日期"前置图标=事件"只读></v-text-field><v-date-picker v-model="foo.date" @input="menu = false">.</v-date-picker></v-菜单>

但它似乎没有尊重 foo 在循环的每次迭代中是不同的，所以它只更新 foo.date 的第一个实例而不是当前 foo.date.

任何有关如何使其工作的建议都会很棒.

解决方案

@Billy Monk 提供的解决方案很好，但还不够，因为它限制了你在选择日期时使用 v-model 关闭日期选择器之类的东西.你可以试试这样的:

HTML:

<v-菜单v-model="menu[foos.indexOf(foo)]":close-on-content-click="false":nudge-right="40"懒惰的过渡=规模过渡"偏移-y全屏宽度最大宽度="290px"最小宽度="290px"><template v-slot:activator="{ on }"><v-文本字段v-model="foo.date"标签=日期"提示="MM/DD/YYYY 格式"持久提示前置图标=事件"v-on="on"></v-text-field></模板><v-date-picker v-model="foo.date" no-title @input="menu[foos.indexOf(foo)] = false"></v-date-picker></v-菜单>

Javascript

data() {返回 {菜单: []，福斯:[{ id: 1, 日期: new Date() },{ id: 2, 日期: new Date() },]}

}

All:

I'm trying to add multiple Vuetify date pickers to a single page. I'm using it within a v-menu so that when a date is selected it is shown in a text field.

The issue I'm having is: when I select a date for the first date field everything works as expected but when I click to select the second date it is populating the first date field again. I have the following:

<div v-for='foo in foos' :key='foo.id'>
    <v-menu
        :close-on-content-click="false"
        v-model="menu"
        :nudge-right="40"
        lazy
        transition="scale-transition"
        offset-y
        full-width
        min-width="290px" >
        <v-text-field        
            slot="activator"
            v-model="foo.date"
            label="Date"
            prepend-icon="event"
            readonly>
        </v-text-field>
        <v-date-picker v-model="foo.date" @input="menu = false">.    
        </v-date-picker>
    </v-menu>
</div>

But it doesn't seem to be respecting that foo is different in each iteration of the loop so it is only updating the first instance of foo.date instead of the current foo.date.

Any advice on how to get this working would be great.

解决方案

The solution provided by @Billy Monk is good but not enough as it restricts you to use v-model for stuff like closing date-picker when a date is selected. You can try something like this:

HTML:

<div v-for='foo in foos' :key='foo.id'>
  <v-menu
      v-model="menu[foos.indexOf(foo)]"
      :close-on-content-click="false"
      :nudge-right="40"
      lazy
      transition="scale-transition"
      offset-y
      full-width
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="foo.date"
          label="Date"
          hint="MM/DD/YYYY format"
          persistent-hint
          prepend-icon="event"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="foo.date" no-title @input="menu[foos.indexOf(foo)] = false"></v-date-picker>
    </v-menu>
</div>

Javascript

data() {
return {
menu: [],
  foos: [
    { id: 1, date: new Date() },
    { id: 2, date: new Date() },
  ]
}

}

这篇关于在单个页面上使用多个 v-date-picker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！