Question

全部：

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

我遇到的问题是：当我为第一个日期字段选择一个日期时，一切都按预期方式工作，但是当我单击以选择第二个日期时，它将再次填充第一个日期字段。我有以下内容：

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

但是似乎并没有考虑到foo在循环的每次迭代中都是不同的，因此它仅更新foo.date的第一个实例，而不是当前的foo.date。

任何有关如何使它正常工作的建议都是很好的。

Answer 1

在@thanksd的帮助下，我得以找出问题所在。

问题是我对所有日期选择器都使用了菜单属性，这意味着每当我单击日期输入时，所有菜单都将打开。但是，由于CSS问题，当我单击日期输入时，只有第一个日期选择器在屏幕上可见，所以我没有意识到这一点。

仅显示一个日期选择器，我仅使用绑定到第一个输入的可见日期选择器。如果我看到了多个日期选择器，我会注意到，如果我使用其他日期选择器中的一个，则会修改其他日期输入。

所以，谢谢，谢谢！

Answer 2

@Billy Monk提供的解决方案很好，但还不够，因为它限制了您在选择日期时将v模型用于诸如关闭日期选择器之类的事情。您可以尝试这样的事情：

HTML：

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

JavaScript

{{1}}

}

在单个页面上使用多个v-date-picker

2 个答案: