VueJS монтируется пользователем () при новом состоянии нажатия / сброса компонента?

Question

У меня на одной странице 2 компонента: 1. Список товаров 2. Lightbox, классический HTML-лайтбокс без каких-либо дополнительных компонентов vuejs

Я передаю информацию о своем предмете в лайтбокс, он работает, если я нажимаю на предмет, я вижу правильное значение.

Моя идея состояла в том, чтобы использовать mount () для выполнения запроса и получения дополнительных данных о каждом вызове, но я видел, что это невозможно, и mount монтируется только при перезагрузке страницы.

Есть ли способ сбросить состояние компонента и запустить монтированный при каждом вызове?

Answer 1

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

Пример:

<div id="app">
  {{ info }}
    <button @click="getData">Get Data</button>
    <button @click="clear">clear</button>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  methods: {
    clear() {
      this.info = null
    },
    getData() {
      axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
           this.info = response
        })
      }
    },
  mounted() {
    this.getData()
  }
})

https://jsfiddle.net/hamiltongabriel/nazvruLj/7/