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?

Solution 1

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

Solution 2

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