Question

如果你有Vuetify的经验并在这种情况下添加日期，那么我有多个名为“date”的v模型。

为“Erfaringer”下的所有项目创建日期选择器的模型。所以我需要它为所选模型创建一个日期选择器，而不是所有“Erfaringer”

它的ui位于第117行，其数据为185-186（不要担心其他代码，这是正在进行的工作）： https://github.com/frederikhojsleth/midwives/blob/master/src/components/Experiences.vue

    <v-expansion-panel>
    <h3 style="margin-top:2%;margin-bottom:2%;">Erfaringer</h3>
    <v-expansion-panel-content ripple v-for="experience in experiences" :key="experience.experience_id">
        <div slot="header">
            {{experience.expTitle}}
        </div>
        <v-card class="grey lighten-3">
            <v-card-text>
                <v-layout row wrap v-if="experience !== addingUserExperience">
                    <v-flex row xs12>
                        <v-btn small block color="success" depressed @click.prevent="onAddUserExperience(experience)">
                            Tilføj erfaring
                        </v-btn>
                    </v-flex>
                </v-layout>
                <v-layout row wrap v-else-if="experience == addingUserExperience">
                    <v-flex xs12>
                        <v-menu ref="menu" :close-on-content-click="false" v-model="menu" :nudge-right="40" :return-value.sync="date" lazy transition="scale-transition" offset-y full-width min-width="290px">
                            <v-text-field required name="date" id="date" slot="activator" v-model="date" label="Vælg dato" prepend-icon="event" readonly></v-text-field>
                            <v-date-picker v-model="date" no-title scrollable>
                                <v-spacer></v-spacer>
                                <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
                                <v-btn flat color="primary" @click="$refs.menu.save(date)">OK</v-btn>
                            </v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-layout xs12>
                        <v-flex sm3 xs6 pr-1>
                            <v-btn small block depressed color='error' @click.prevent="cancel">Afslut</v-btn>
                        </v-flex>
                        <v-flex sm9 xs6 pl-1>
                            <v-btn small block depressed color='success' @click.prevent="addUserExperience(experience)">Tilføj</v-btn>
                        </v-flex>
                    </v-layout>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-expansion-panel-content>
</v-expansion-panel>

    data() {
    return {
      date: null,
      menu: false
    };
  },

Vue：在页面上显示选定的vuetify日期选择器，其中包含多个日期选择器

0 个答案: