Ответ на нажатие на элемент Vue программно

Question

По сути, я хочу, чтобы мой экземпляр Vue реагировал на нажатие загруженного эскиза.

Я использую пакет FineUploader Vue с макетом шаблона для документов (см. Конец вопроса). После загрузки изображения выдается следующее дерево:

<Root>
   <Gallery>
      <Thumbnail>
    </Gallery>
</Root>

Исходя из фона jQuery, я действительно понятия не имею о «правильном» способе сделать это, поскольку шаблон миниатюр уже определен пакетом, и поэтому я не создаю свой собственный шаблон миниатюр. Я знаю, что могу получить доступ к таким элементам:

let thumb = this.$el.querySelector('.vue-fine-uploader-thumbnail');

И, возможно, слушатель

 thumb.addEventListener('click', function() {
       alert('I got clicked');
   });

Но дело с перерисовкой экземпляра Vue и т. Д. Я не знаком с этим.

Шаблон Vue:

<template>
  <Gallery :uploader="uploader" />
</template>

<script>
  import FineUploaderTraditional from 'fine-uploader-wrappers'
  import Gallery from 'vue-fineuploader/gallery'

  export default {
    components: {
      Gallery
    },
    data () {
      const uploader = new FineUploaderTraditional({
        options: {/*snip*/}
      })

      return {
        uploader
      }
    }
  }
</script>

Answer 1

Чтобы ответить на события клика, вы добавляете v-on:click (или его краткую форму: @click) к любому тегу, который хотите.

Если у вас есть вложенные элементы, которые реагируют на щелчоксобытие, которое вы можете столкнуться с тем, что клик по ребенку запускает событие по щелчку родителей.Чтобы предотвратить это, вместо этого вы добавляете @click.stop, чтобы родительский щелчок не вызывал.

Таким образом, вы бы получили что-то вроде:

<Gallery @click="myFunction" />