在 Vue.js 的 v-for 循环中访问字符串数组值

Question

我需要从函数中的数组中获取字符串值。我在模板中声明的组件如下：

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

这里是 playlist 在我的 .vue 文件中的 data() { return {} } 中声明的位置：

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

这是我在同一个 .vue 文件的 methods 部分中的函数：

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

我需要将playlist 数组的当前值传递给playImageModal() 中的Analytics() 函数，但是，我不太确定如何访问该值。我查看了 Vue.js 文档，当我的 playlist 数组包含通用对象而不是字符串时，这很容易做到……在我的模板中设置我的 vid-id 值时，我只需执行 video.nameOfObjectAttribute 即可。但是当有字符串数组时如何访问这些值呢？

Answer 1

我认为您只是缺少:

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

包含一个键也是一个好主意

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

如果你想运行一个函数，你可以（不应该）

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

通常你会在一些事件催化剂上运行一个函数（比如@click=playImageModal(video)，但这取决于 playImageModal 的作用

Answer 2

Daniel 是正确的，但我想添加更多上下文，以防您或其他人看到这是新的 Vue 及其所有荣耀！

您缺少的关键是v-bind 指令（简写为:）。这会将您传递给 prop 的值“绑定”，该值可以是变量、字符串、javascript 表达式等。否则，不使用 bind 会将传递的值视为字符串。

速记与速记

速写

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

速记

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

效果一样！这用于将 props 绑定到自定义组件或将变量绑定到原生 html 元素属性。

绑定陷阱

由于在不使用v-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 对象解构 | es6

v-for 与 es6 的好处在于，如果它们是对象，您可以 destructure 可迭代的“项目”，并将任何解构的属性“绑定”到任何组件属性或元素属性。

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)"
/>

注意：“在单文件组件、字符串模板和 JSX 中，没有内容的组件应该是自闭合的——但在 DOM 模板中永远不会。” - Vue style guide