Styjun

How much can I judge a company based on a phone screening?

What is the difference between 王 and 皇?

Do I have to cite common CS algorithms?

Why did IBM make public the PC BIOS source code?

Why did Saruman lie?

Is there a way to encourage or even force airlines and booking engines to show options with overnight layovers?

If "more guns less crime", how do gun advocates explain that the EU has less crime than the US?

Scam? Phone call from "Department of Social Security" asking me to call back

Boss asked a co-worker to assault me

How would you translate this? バタコチーズライス

What is a "soap"?

What is the farthest a camera can see?

Boss wants me to ignore a software API license prohibiting mass download

How should I write this passage to make it the most readable?

Does EU compensation apply to flights where the departure airport closes check-in counters during protests?

Escape Velocity - Won't the orbital path just become larger with higher initial velocity?

Who invented Monoid?

Will using a resistor in series with a LED to control its voltage increase the total energy expenditure?

Does fossil fuels use since 1990 account for half of all the fossil fuels used in history?

Running code generated in realtime in JavaScript with eval()

Graphs for which a calculus student can reasonably compute the arclength

Submitting a new paper just after another was accepted by the same journal

Can lodestones be used to magnetize crude iron weapons?

Tempoverlustspiel

change class dinamically to the pass of a videotime

Passing data to components in vue.jsPassing event and argument to v-on in Vue.jsHow to pass a parameter to Vue @clickThe width of columns in a table change when a row of input boxes is added dinamicallyVue.js pass props to dynamicly change component classHow to dinamically make computed in Vue.js, under dynamically loaded datachange class depend on string valuesVue.js Firestore Fill select dynamicallyPassing multiple properties in vuejs witch class

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

i need to change the class of some span to the pass of the time of a video. i create the span tags from an array with the v-for, inside the array i have the start time and stop time of the text, so i want to change the class of the single text checking the interval and the actual video time. i tried this code:

```

 <span :class="'selected':(item.id===currentIndex)" v-for="item in Array">
 item.text
 </span>


data()
return
Array: [
 id: 0,
 start_time: 0,
 end_time: 1,
 text: "Hello"
 , 
 id: 1,
 start_time: 1,
 end_time: 2,
 text: "guys."
 , 
 id: 2,
 start_time: 2,
 end_time: 3,
 text: "In this lesson"
 , ...]
,
currentIndex:'',
 

setInterval(myTimer, 500);

function myTimer() 
 for (let i in array) 
 if (Math.round(_myplayer.currentTime()) != 0) 
 if (array[i].start_time < Math.round(_myplayer.currentTime()) && Math.round(_myplayer.currentTime()) <= array[i].end_time) 
 this.currentIndex=i;
 
 
 
 
```

these are the main pieces of my code, the main problem is to link the currentIndex to the id of the span. it's a kind of ted transcript text highlight
sorry for my english, thank you

vue.js

share|improve this question

edited Mar 27 at 10:15

peppeg85

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

add a comment | 

0

i need to change the class of some span to the pass of the time of a video. i create the span tags from an array with the v-for, inside the array i have the start time and stop time of the text, so i want to change the class of the single text checking the interval and the actual video time. i tried this code:

```

 <span :class="'selected':(item.id===currentIndex)" v-for="item in Array">
 item.text
 </span>


data()
return
Array: [
 id: 0,
 start_time: 0,
 end_time: 1,
 text: "Hello"
 , 
 id: 1,
 start_time: 1,
 end_time: 2,
 text: "guys."
 , 
 id: 2,
 start_time: 2,
 end_time: 3,
 text: "In this lesson"
 , ...]
,
currentIndex:'',
 

setInterval(myTimer, 500);

function myTimer() 
 for (let i in array) 
 if (Math.round(_myplayer.currentTime()) != 0) 
 if (array[i].start_time < Math.round(_myplayer.currentTime()) && Math.round(_myplayer.currentTime()) <= array[i].end_time) 
 this.currentIndex=i;
 
 
 
 
```

these are the main pieces of my code, the main problem is to link the currentIndex to the id of the span. it's a kind of ted transcript text highlight
sorry for my english, thank you

vue.js

share|improve this question

edited Mar 27 at 10:15

peppeg85

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

add a comment | 

i need to change the class of some span to the pass of the time of a video. i create the span tags from an array with the v-for, inside the array i have the start time and stop time of the text, so i want to change the class of the single text checking the interval and the actual video time. i tried this code:

```

 <span :class="'selected':(item.id===currentIndex)" v-for="item in Array">
 item.text
 </span>


data()
return
Array: [
 id: 0,
 start_time: 0,
 end_time: 1,
 text: "Hello"
 , 
 id: 1,
 start_time: 1,
 end_time: 2,
 text: "guys."
 , 
 id: 2,
 start_time: 2,
 end_time: 3,
 text: "In this lesson"
 , ...]
,
currentIndex:'',
 

setInterval(myTimer, 500);

function myTimer() 
 for (let i in array) 
 if (Math.round(_myplayer.currentTime()) != 0) 
 if (array[i].start_time < Math.round(_myplayer.currentTime()) && Math.round(_myplayer.currentTime()) <= array[i].end_time) 
 this.currentIndex=i;
 
 
 
 
```

these are the main pieces of my code, the main problem is to link the currentIndex to the id of the span. it's a kind of ted transcript text highlight
sorry for my english, thank you

vue.js

share|improve this question

edited Mar 27 at 10:15

peppeg85

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

```

 <span :class="'selected':(item.id===currentIndex)" v-for="item in Array">
 item.text
 </span>


data()
return
Array: [
 id: 0,
 start_time: 0,
 end_time: 1,
 text: "Hello"
 , 
 id: 1,
 start_time: 1,
 end_time: 2,
 text: "guys."
 , 
 id: 2,
 start_time: 2,
 end_time: 3,
 text: "In this lesson"
 , ...]
,
currentIndex:'',
 

setInterval(myTimer, 500);

function myTimer() 
 for (let i in array) 
 if (Math.round(_myplayer.currentTime()) != 0) 
 if (array[i].start_time < Math.round(_myplayer.currentTime()) && Math.round(_myplayer.currentTime()) <= array[i].end_time) 
 this.currentIndex=i;
 
 
 
 
```

share|improve this question

edited Mar 27 at 10:15

peppeg85

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

share|improve this question

edited Mar 27 at 10:15

peppeg85

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

asked Mar 27 at 10:09

peppeg85peppeg85

2377 bronze badges

1 Answer
1

active

oldest

votes

0

Try to put set interval into 'created' life cycle hook like :

created: function () 
 setInterval(myTimer, 500);
 

Or better use v-model to watch your id

share|improve this answer

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  solved with " let _this=this " out of the function mytimere and using _this inside
  
  – peppeg85
  Mar 27 at 12:16
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55374607%2fchange-class-dinamically-to-the-pass-of-a-videotime%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try to put set interval into 'created' life cycle hook like :

created: function () 
 setInterval(myTimer, 500);
 

Or better use v-model to watch your id

share|improve this answer

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  solved with " let _this=this " out of the function mytimere and using _this inside
  
  – peppeg85
  Mar 27 at 12:16
  

  
  
  
  

add a comment | 

0

Try to put set interval into 'created' life cycle hook like :

created: function () 
 setInterval(myTimer, 500);
 

Or better use v-model to watch your id

share|improve this answer

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  solved with " let _this=this " out of the function mytimere and using _this inside
  
  – peppeg85
  Mar 27 at 12:16
  

  
  
  
  

add a comment | 

Try to put set interval into 'created' life cycle hook like :

created: function () 
 setInterval(myTimer, 500);
 

Or better use v-model to watch your id

share|improve this answer

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

created: function () 
 setInterval(myTimer, 500);
 

share|improve this answer

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges

answered Mar 27 at 10:39

KanowKanow

3866 bronze badges