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

【问题标题】：Insert Vue.js JSON object value directly into a Javascript setInterval function将 Vue.js JSON 对象值直接插入 Javascript setInterval 函数
【发布时间】：2019-03-11 15:59:04
【问题描述】：

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

我有一个只显示当前 HTML ID 的幻灯片 HTML 页面

我的每张幻灯片都有一个从我的 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)

【问题讨论】：

你在vue组件之外使用js有什么原因吗？
不！只是认为它不是严格意义上的 Vue，只是普通的 JS，它应该超出 Vue 页脚编码。

标签： javascript json vue.js vuejs2 setinterval

【解决方案1】：

在某些更改后（在这种情况下，在fetch 之后）访问数据的最简单方法（恕我直言）是使用$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/ 它没有实现点击时间，因为这超出了问题的范围

【讨论】：

感谢您的全面回答，但让计时器点击方面发挥作用至关重要。

【解决方案2】：

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

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

【讨论】：