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

Question

当元素使用vuejs加载到for循环时，我想调用on事件。我已经在页面加载上找到了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，并为每个选项调用一个方法。

如果你能提供更多关于你想要达到的目标的背景信息，也许我们可以找到一条更好的路线。

PS！欢迎来到StackOverflow