Accessing string array values in a v-for loop in Vue.js

Question

I need to get string values out of an array in a function. My declared component in my template is as follows:

<video-preview v-for="video in playlist" vid-id="how-do-I-get-the-string
  -value-from-the-playlist-for-this-iteration"></video-preview>

Here is where playlist is declared in my data() { return {} } in my .vue file:

playlist: [
  'videoID1',
  'videoID2',
],

And here is my function in the methods section of the same .vue file:

playImageModal(video) {
  Analytics('content_viewed', vidId)
  // other functionality to play the video
}

I need to pass the current value of the playlist array into the Analytics() function in playImageModal(), however, I'm not quite sure how to access that value. I've looked at Vue.js documentation, and it is easy enough to do when my playlist array holds generic objects verses holding strings... I simply would do video.nameOfObjectAttribute when setting my vid-id value in my template. But how do I access these values when there is an array of strings?

vid-id="video"

Luis felipe De jesus Munoz
– Luis felipe De jesus Munoz

2018-10-15 21:11:47 +00:00
Commented Oct 15, 2018 at 21:11 — Luis felipe De jesus Munoz
– Luis felipe De jesus Munoz, Commented Oct 15, 2018 at 21:11

Daniel · Accepted Answer · 2018-10-16 21:24:34Z

4

I think you're just missing the :

<video-preview v-for="video in playlist" :vid-id="video"></video-preview>

it's also a good idea to include a key

<video-preview v-for="video in playlist" :vid-id="video" :key="video"></video-preview>

if you want to run a function you could (not should)

<video-preview v-for="(video, i) in playlist" :vid-id="playImageModal(video)" :key="i"></video-preview>

Usually you would run a function on some event catalyst (like @click=playImageModal(video), but that depends on what playImageModal does

edited Oct 16, 2018 at 21:24

answered Oct 15, 2018 at 21:23

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 02:23:31Z

Daniel is correct, but I wanted to add a little more context in case you or other see this that are new Vue and all of its glory!

The key thing you are missing is the v-bind directive (shorthand is :). This "binds" the value you pass to the prop, which this value could be a variable, a string, a javascript expression, etc. Otherwise, not using bind treats the value passed as a string.

Longhand vs shorthand

longhand

<video-preview
   v-for="video in playlist"
   v-bind:vid-id="video"
   v-bind:key="video"
/> <!-- use self-closing tags if no children -->

shorthand

<video-preview
   v-for="video in playlist"
   :vid-id="video"
   :key="video"
/>

same effect! This is used to bind props to custom components or bind variables to native html element attributes.

Binding gotchas

Since the value is treated as a string when not using v-bind (aka :), there are some common gotchas to look out for when considering whether to bind or not to bind...

// example data
data() {
  return {
    name: 'bob',
  };
}

<my-component
  prop1="name"
  prop2="false"
  prop3="true"
  prop4="1 + 1"

  :prop5="name"
  :prop6="false"
  :prop7="true"
  :prop8="1 + 1"
  :prop9="'some random string'"
/>

// not binding
prop1 === 'name'
prop2 === 'false' && prop2 !== false
prop3 === 'true' && prop3 !== true
prop4 === '1 + 1'

// binding
prop5 === 'bob'
prop6 === false
prop7 === true
prop8 === 2
prop9 === 'some random string'

`v-for` object destructuring | es6

The nice thing about v-for with es6 is that you can destructure the iterable "item" if they are objects and "bind" any of the destructured properties to any component prop or element attribute.

data() {
  return {
    // example playlist array
    playlist: [
      {
        id: 123,
        name: 'movie1',
      },
      {
        id: 124,
        name: 'movie2',
      },
    ],
  };
}

<video-preview
   v-for="{ id, name } in playlist"
   :key="id"
   :vid-id="id"
   :vid-name="name"
   @click="playImageModal(id)"
/>

Note: "Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates." - Vue style guide

Collectives™ on Stack Overflow

Accessing string array values in a v-for loop in Vue.js

2 Answers 2

Comments

Longhand vs shorthand

Binding gotchas

`v-for` object destructuring | es6

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Longhand vs shorthand

Binding gotchas

v-for object destructuring | es6

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`v-for` object destructuring | es6