Vue.js 无需重新加载页面即可更新数据

Question

我这里有 2 个组件，Create.vue 和 ModalAddEventName.vue。 Create.vue 组件包含一个名称下拉列表和一个用于打开 ModalAddEventName.vue 的按钮。

添加数据有效，但我必须重新加载页面才能使新名称出现在下拉列表中，如何使新名称立即出现而无需重新加载页面？

这是我的 Create.vue 组件下拉列表

                <v-autocomplete
                  v-model="form.eventName"
                  :items="eventNames"
                  :loading="isLoadingEventName"
                  :search-input.sync="onSearchEventName"
                  :rules="rules.required"
                  item-text="name"
                  item-value="id"
                  autocomplete="off"
                  label="Event Name*"
                  outlined
                  hide-details
                  required
                  dense
                  return-object
                >
                  <template #append-item>
                    <div v-intersect="onEventNameIntersect" />
                  </template>
                <v-btn
                  color="#373671"
                  @click="$refs.ModalAddEventName.open()"
                  ><v-icon left> mdi-plus </v-icon>Add Event Name</v-btn
                >

                <modal-add-event-name
                ref="ModalAddEventName"
                key="ModalAddEventName"
                @onSubmitted="onSubmittedEventName"
    />

这是模态代码

<template>
  <v-dialog
    v-model="dialog"
    max-width="506px"
  >
    <v-card class="pa-8">
      <v-form @submit.prevent="onSubmit">
        <p class="fw-700 fs-28 lh-44 c-121212 mb-6">Add Event Name</p>

        <v-text-field
          v-model="eventName"
          autocomplete="off"
          label="Event Name*"
          flat
          outlined
          dense
          class="rounded-lg"
          hide-details="true"
        />

        <div
          v-if="errorMessage"
          class="alert"
        >
          <v-icon
            left
            color="#733572"
            >mdi-information</v-icon
          >
          {{ errorMessage }}
        </div>

        <v-card-actions class="pa-0 mt-12">
          <v-btn
            color="#373671"
            outlined
            depressed
            @click="close"
          >
            Cancel
          </v-btn>
          <v-btn
            color="#373671"
            type="submit"
            :loading="loading"
            depressed
            :disabled="!eventName"
          >
            {{ confirmText }}
          </v-btn>
        </v-card-actions>
      </v-form>
    </v-card>
  </v-dialog>
</template>

<script>
  import api from '@/api'

  export default {
    name: 'ModalAddEventName',
    emit: ['onSubmitted'],
    props: {
      confirmText: {
        type: String,
        default: 'Apply',
      },
    },
    data: () => ({
      dialog: false,
      errorMessage: '',
      eventName: '',
      loading: false,
    }),
    methods: {
      open() {
        this.dialog = true
      },
      close() {
        this.reset()
      },
      reset() {
        this.loading = false
        this.dialog = false
        this.errorMessage = ''
        this.eventName = ''
      },
      async onSubmit() {
        try {
          this.loading = true
          this.errorMessage = ''

          const res = await api.bootcamp.eventNamePost({ name: this.eventName })

          this.$emit('onSubmitted', res.data)
          this.$emit('eventNameAdded', this.eventName)
          this.reset()
        } catch (error) {
          this.loading = false
          this.errorMessage = error.response.data.message
        }
      },
    },
  }
</script>

在创建组件中，我在数据中添加了事件名称，如下所示

 data: () => ({
      eventNames: [],

async mounted() {
      this.onGetEventNames()
    },

methods: {
async onGetEventNames(params = {}) {
        try {
          const res = await api.bootcamp.eventNamesGet({}, params)
          this.eventNames = [
            ...this.eventNames,
            ...res.data.bootcamp_event_names,
          ]
          this.eventNamesPagination = res.meta.pagination
        } finally {
          this.isLoadingEventName = false
        }
      },
async onSubmittedEventName(status) {
        status === 'OK' && this.onGetEventNames()
      },

}

我应该在这里做什么？

Answer 1

数据不能使用箭头功能，应该这样使用

data() {}

箭头函数会改变这个目标，响应式会失败