Question

当我使用vuejs将其加载到for循环中时，我想在element上调用load事件。我在页面加载时发现了onload事件，但无论如何我都找不到使用element进行的事情。这是我的代码，但是不起作用。

<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

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

1 个答案: