Vuejs - Как вызвать метод для события загрузки элемента

Question

Vuejs - Как вызвать метод для события загрузки элемента

1

Я хочу вызвать событие load для элемента, когда он загружается в цикл for, используя vuejs. Я обнаружил событие onload при загрузке страницы, но никак не могу найти это для элемента. Вот мой код, но он не работает.

<ul>
  <li v-for="(option,opt_index) in question.options" v-on:load="test">
  Testing
  </li>
</ul>

Вот мой компонент.

import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(datePicker);
Vue.use(VueSweetalert2);
Vue.use(VeeValidate);

export default {
    name: "modal",
    components: {
        draggable,
    },
    mounted() {
    },
    methods: {
        test(){
            alert('load');
        }
    }
}

aftab hussain 11 янв. 2019, в 08:59

Источник

Теги:

javascript

vue.js

dom-events

1 ответ

Ещё вопросы

Kano · Answer 1 · 2019-01-11T05-53-00.000Z

Это потому, что элемент списка (li) не генерирует собственное событие load. Следующая лучшая вещь, которую вы можете сделать, это дождаться завершения следующего цикла рендеринга Vue и затем вызвать ваш метод. Таким образом, вы гарантируете, что весь цикл закончил рендеринг.

Чтобы дождаться окончания цикла рендеринга, нам нужно использовать служебный метод Vue nextTick():

import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(datePicker);
Vue.use(VueSweetalert2);
Vue.use(VeeValidate);

export default {
    name: "modal",
    components: {
        draggable,
    },
    mounted() {
      this.$nextTick(() => {
        this.test();
      });
    },
    methods: {
        test(){
            alert('load');
        }
    }
}

В этом примере мы используем nextTick обратного вызова nextTick. Там также версия на основе обещаний:

mounted() {
  this.$nextTick().then(this.test);
}

Или, если вы знакомы с async/await:

async mounted() {
  await this.$nextTick();
  this.test();
}

Обратите внимание, что при этом не test метод test для каждого элемента question.options. Если вы хотите сделать это, я полагаю, что ваш единственный вариант - все еще использовать nextTick а затем снова в цикле test через question.options и вызывать метод для каждого параметра.

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

PS! Добро пожаловать в StackOverflow