Vue: отображать выбранные средства выбора даты vuetify на странице с несколькими устройствами выбора даты - PullRequest
0 голосов
/ 22 мая 2018

Если у вас есть опыт работы с Vuetify и добавлением даты в этом случае, где у меня есть несколько v-моделей, называемых «дата».

В качестве примера: http://recordit.co/2vQFRVKbOp

Создает модель для выбора даты для всех элементов в разделе "Erfaringer".Поэтому мне нужно, чтобы он создал только 1 средство выбора даты для выбранной модели, а не для всех «Erfaringer»

Пользовательский интерфейс для него находится в строке 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
    };
  },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...