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

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

0 голосов
/ 11 января 2019

Я хочу вызвать событие 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');
        }
    }
}

1 Ответ

0 голосов
/ 11 января 2019

Это потому, что элемент списка (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. Также есть версия, основанная на обещаниях: 

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

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

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

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

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

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

...