Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nuxt v-for

See original GitHub issue

在nuxt后端渲染的 v-for 循环中，只显示第一个 video ，后面出来的都是空的。

<div v-for="item in items">
         <div class="video-player-box" v-video-player:myVideoPlayer="item.playerOptions">
         </div>
</div>

Issue Analytics

State:
Created 6 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

3reactions

surmon-chinacommented, Apr 17, 2017

问题已修复，需升级到 v3.0.6，在你的项目中使用playerInstanceName强制使用指定实例名，如下：

<div v-for="(item, index) in items">
  <div class="video-player-box" :playerInstanceName="`player${index}`" v-video-player="item.playerOptions"></div>
</div>

原有的使用方式均不受影响。在nuxt.js中，实例别名的优先级为：playerInstanceName > directive.arg > default:'player'

0reactions

EvilVarmilocommented, Oct 30, 2020

v5.0.2 PlayerInstanceName不起作用

Top Results From Across the Web

List Rendering - Vue.js

We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax...

How To Iterate Over Items in Vue.js With V-for | DigitalOcean

We can loop over the items in a shoppingItems array from the data model. This can be accomplished by adding the v-for directive...

How can I use a v-for value in to nuxt link? - Stack Overflow

How can I use the value from my for loop in my nuxt-link? So to="value"? <ul class="link"> <li v-for="(link, text) in links" :key="text" ......

Nuxt - The Intuitive Vue Framework

Nuxt has an ideal balance of approachability for developers new to JAMstack, and power for experienced teams working on complex applications. The modules...

How to Write Better Vue v-for Loops - LearnVue

In Vue, v-for loops are something that every project will use at some point or another. They allow you to write for loops...