vuejs渲染html更改后如何运行js代码

Posted 2023-02-22

【中文标题】vuejs渲染html更改后如何运行js代码

【英文标题】：How to run a js code after vuejs render html changes

【发布时间】：2018-10-02 20:40:10

【问题描述】：

我正在使用 jquery 日期选择器工具。但它在 v-if 内。如果我编写此代码，当我打开和关闭它时它不起作用。

showdatepicker:function()
    this.datepicker= true;
    $(".jquery-date-picker").datepicker();

因为当 $(".jquery-date-picker").datepicker();运行 vue 仍然没有呈现 html 并添加了我的 datepicker 输入。但如果将其更改为：

showdatepicker:function()
    this.datepicker= true;
    setTimeout(function()$(".jquery-date-picker").datepicker();,0);

它有效。因为在 html 渲染之后运行它。

我的问题：在 html 渲染之后，setTimeout 是一种有保证的方法吗？ vuejs 中是否有建议的方法来做到这一点。我在 google 和 *** 搜索中找不到任何答案。

【参考方案1】：

您可以使用nextTick，它将在下一个 DOM 更新周期后调用一个函数。

this.datepicker = true;

Vue.nextTick(function () 
  $(".jquery-date-picker").datepicker();
)

这是文档中的页面VueJS Docs

【参考方案2】：

Vue 具有触发器，在您的情况下，可以使用 mounted() 函数。本文介绍了如何使用它以及整个 Vue hook 时间线：https://alligator.io/vuejs/component-lifecycle/

*** 解释：Vue JS mounted()