Question

如何将当前项目的Vue.js对象输入页面上的另一个Javascript函数？

我有一个幻灯片HTML页面，仅显示当前HTML ID

每张幻灯片都有一个从我的JSON（timer对象）提取的时间（以秒为单位）。我需要将此数字（以秒为单位）放入SetInterval函数中，以编程方式加载下一张幻灯片。

var seconds = parseInt(document.querySelector("#value").innerText) * 1000;
      setInterval(function () {
          document.querySelector("a.o-controls2").click();
      }, seconds)

您可以在操作here中看到示例。

我尝试加载表达式值，但在控制台中得到了null结果。那么也许这与页面加载以及Vue如何呈现页面有关？

我也通过加载Vue对象尝试了以下操作，但这也不起作用：

var seconds = (this.timer - 1) 1000;
setInterval(function () { document.querySelector("a.o-controls2").click();
}, seconds)

Answer 1

null的响应是来自querySelector()的返回；之所以返回null，是因为外部脚本正在之前运行，Vue渲染了该应用程序。运行脚本时，文档中没有ID为“ value”的元素。

最简单的解决方法可能是将代码移至应用程序的mounted()生命周期挂钩中；可能在nextTick()中以确保所有子组件也都已渲染。

Answer 2

更改后（在这种情况下，在fetch之后）访问数据的最简单方法（IMHO）是使用$emit和$on

this.items = items.reverse();
this.$nextTick(() => this.$emit('dataLoaded', this.items));

您也可以在不使用nextTick的情况下使用它，但是在dom更新之前，您将获得数据，因此您的js将会失败。

this.items = items.reverse();
this.$emit('dataLoaded', this.items);

然后使用...收听更改

app.$on('dataLoaded', items => {
  console.log('items', items)
  document.querySelector("a.o-controls2"); // now accessible
  // do stuff
})

这是一个小提琴：https://jsfiddle.net/y32hnzug/1/ 它没有实现点击时间，因为这不在问题范围内

将Vue.js JSON对象值直接插入Javascript setInterval函数中

2 个答案: