Vue Диалог выполняется при активации / вызове

Question

У меня есть следующий диалог в моем компоненте:

<v-dialog v-model="orderDetailsDialogVisible" max-width="900px">
    <OrderDetailsDialog v-bind="{selectedOrder:selectedOrder, source:source}"></OrderDetailsDialog>
</v-dialog>

orderDetailsDialogVisible установлен на true, когда пользователь нажимает кнопку. перед этим устанавливаются параметры selectedOrder и source.

Когда пользователь щелкает в другом месте вне диалогового окна, диалоговое окно исчезает.

В моем диалоге мне нужно сделать REST Call, каждый раз, когда отображается диалог.

Я не знаю, где его поставить. Когда я помещаю его в beforeMount, он выполняется только при первом появлении диалогового окна. Когда диалоговое окно исчезает и появляется снова, beforeMount не вызывается. Также updated не работает в том смысле, что код обновляет модель, которая, в свою очередь, вызывает updated, которая затем заканчивается бесконечным l oop.

Answer 1

Вы можете использовать событие mounted для инициализации. И вы можете использовать watch для обновлений:

Код будет таким:

export default {
  name: 'app',
  data: () => ({
    orderDetailsDialogVisible: false,
  }),
  watch: {
    orderDetailsDialogVisible(newValue, oldValue) {
      if (newValue) {
        this.requestApi();
      }
    },
  },
  methods: {
    requestApi() {
      console.log('requestApi');
      // axios.get...
    },
  },
  mounted() {
    this.requestApi();
  },
};