Vuejs - 如何在元素上的加载事件上调用方法

Question

我想在使用 vuejs 将元素加载到 for 循环中时调用元素上的加载事件。我在页面加载时发现了 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');
        }
    }
}

Answer 1

这是因为列表项 ( 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的回调版本。还有一个基于 Promise 的版本：

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

或者，如果您熟悉async/await：

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

请注意，这不会test为每个question.options项目触发方法。如果你想这样做，我想你唯一的选择是仍然使用nextTick然后再次内部test循环question.options并为每个选项调用一个方法。

如果您提供有关您要实现的目标的更多背景信息，也许我们可以找到一条更理想的路线。

附注！欢迎使用 StackOverflow