在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>

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

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

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

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

我需要将playlist数组的当前值传递到Analytics()中的playImageModal()函数中，但是，我不确定如何访问该值。我看过Vue.js文档，当我的playlist数组包含通用对象而不是字符串时，这样做很容易...在设置{{1}时，我只会做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会将传递的值视为字符串。

速记vs速记

长手

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

效果相同！用于将道具绑定到自定义组件或将变量绑定到本地html元素属性。

绑定陷阱

由于在不使用v-bind（又名:）时将值视为字符串，因此在考虑是否绑定...时要注意一些常见的陷阱... < / p>

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

使用es6进行v-for的好处是，您可以destructure将可迭代的“ item”作为对象，并将任何解构的属性“绑定”到任何组件prop或element属性。

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