Question

如何使用v-for语法使用prop值？我有一个如下数组：

[
  {
    "id": 287,
    "author": 1,
    "featured_media": 288,
    "categories": [
      107
    ],
    "tags": [
      86
    ],
    "authors": [
      61
    ]
  },
  {
    "id": 224,
    "author": 1,
    "featured_media": 225,
    "categories": [
      107
    ],
    "tags": [
      21
    ],
    "authors": [
      77
    ]
  }
]

通常使用v-来执行v-for="category in post.categories"或v-for="category in post.authors"。但是，我希望能够通过道具设置语法的“类别”，“标签”或“作者”部分。

因此，如果我使用类似<post-taxonomies :post="post" type="authors"/>或<post-taxonomies :post="post" type="tags"/>的组件，则v-for可以从数组中获取“ type”属性。

我可以这样做吗？

我的组件

<template>
  <div>
    <div v-if="type">
      <archive-link
        v-for="author in post.type" <----make this dependent on the "type" prop value??
        :key="post.id+author"
        archive-type="authors"
        :archive-id="author"
      />
    </div>
  </div>
</template>

<script>
const ArchiveLink = () => import(
  /* webpackChunkName: "posts" */
  '@/components/utility/ArchiveLink')

export default {
  name: 'PostTaxonomies',
  components: { ArchiveLink },
  props: {
    post: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      required: false
    }
  },
  data() {
    return {}
  }
}
</script>

Answer 1

对于动态属性，只需在v-for中使用括号。

v-for="author in post[type]"

Vue-在v-for语法中使用prop

1 个答案: