Блог

Я новичок в Vue.js . Я создаю приложение, в котором использую Vuetify и nuxt, и хочу иметь модальный редактор многократного использования. До сих пор я выяснял, что могу использовать v-dialog. У меня есть список домашних животных, и я хочу, чтобы редактор для этого питомца появлялся при нажатии на ссылку Редактировать действие в каждой строке. Редактор должен загрузить объект pet из серверной части и представить форму редактора. При нажатии кнопки Сохранить в модальном режиме питомец должен быть сохранен, а родитель уведомлен, чтобы он мог обновить список. Я хочу иметь возможность добавлять домашних животных на другую страницу (скажем, на странице пользователей я хочу иметь возможность выбирать существующих домашних животных, а также регистрировать нового питомца), используя тот же редактор.

Есть ли рекомендуемый способ создать компонент, который может быть сигнализирован для загрузки питомца с заданным идентификатором или открытия пустой формы, а также обрабатывать сохранение домашних животных и сигнализировать родителю, что домашнее животное было обновлено или создано?

Почему бы не использовать props для входного сигнала и emit event для выходного сигнала?

В приведенном ниже примере компонент редактора реагирует на petId , и вы можете закрыть диалоговое окно, установив petId значение null

В EditorDialog.vue :

 <template>
  <v-dialog :value="petId !== null">
    <!-- You editor -->
    <v-button @click="onSave">Save</v-button>
  </v-dialog>
</template>

<script>
export default {
  props: {
    petId: {
      type: String,
      default: '' // '' means create new pet
    }
  },
  watch: {
    petId: {
      immediate: true,
      handler(petId) {
        if (petId === null) return
        // fetch data or create empty data
      }
    }
  }
  methods: {
    onSave(): {
      const data = xx // your logic here
      this.$emit('save', data)
    }
  }
}
</script>
  

И в родительском:

 <EditorDialog pet-id="blah" @save="handler" />
  

Вы можете установить pet-id initial в null , и диалоговое окно не будет отображаться как открытое на стороне сервера. Кроме того, вы можете удалить immediate: true , если начальное значение всегда null