Вставьте значение объекта JSON Vue.js непосредственно в функцию setInterval Javascript - PullRequest
Новая
       29

Вставьте значение объекта JSON Vue.js непосредственно в функцию setInterval Javascript

0 голосов
/ 11 марта 2019

Как я могу ввести объект Vue.js для текущего элемента в другую функцию Javascript на странице?

У меня есть HTML-страница слайда, на которой отображается только текущий идентификатор HTML

КаждыйУ моего слайда есть время в секундах, извлеченное из моего JSON, объекта timer.Мне нужно поместить это число в секундах в функцию SetInterval, чтобы программно загрузить следующий слайд. 

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

Вы можете увидеть пример в действии здесь .

Iпопытался загрузить значение выражения, но в консоли получил результат null.Так что, возможно, это как-то связано с загрузкой страницы и тем, как Vue отображает страницу?

Я также попробовал следующее, загрузив объект Vue, но это тоже не сработало: 

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

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Самый простой способ (ИМХО) получить доступ к данным после некоторого изменения (в данном случае после 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/ она не реализует время щелчка, хотя это выходит за рамки вопроса

0 голосов
/ 11 марта 2019

Ответ null является возвращением от querySelector(); он возвращает null, потому что внешний сценарий работает до того, как Vue отобразит приложение. Когда скрипт выполняется, в документе нет элемента с идентификатором «значение».

Самым простым решением может быть перемещение этого кода в хук жизненного цикла приложения mounted(); возможно в пределах nextTick(), чтобы убедиться, что все дочерние компоненты также отрисованы.

...