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

的回调版本。还有一个基于承诺的版本：

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

或者如果您熟悉

async/await

：

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

请注意，这不会为每个

test

项目触发

question.options

方法。 如果您想这样做，我想您唯一的选择是仍然使用

nextTick

，然后在

test

内再次循环

question.options

并为每个选项调用一个方法。