Question

我正在使用VueJ和Wagtail作为后端。我需要显示多个图像。我正在获取每个图像的ID，但不知道如何在Vue实例内部传递。在此项目中，block.value = id。在image_path我只得到一个图像路径。这就是为什么我要使用图像ID。

<template>
<div>
  <div>
    <b-card-group deck v-for="item in results" :key="item.id">
      <b-card
        border-variant="primary"
      >
        <b-card-text>
          <div v-for="block in item.body" :key="block.id">
            <div v-if="block.type == 'heading'">
              <h2>{{block.value}}</h2>
            </div>
             <div v-if="block.type == 'image'">
              <img :src="'http://127.0.0.1:8000/' + block.value">  //I need to pass this block.value to for loop
            </div>
             <div v-if="block.type == 'paragraph'">
              <h2 v-html="block.value">{{block.value}}</h2>
            </div>
          </div>
        </b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>
</template>

<script>

import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      results: null,
      image_path: null,
      tags: null,
      title: null,
      images: null
    }
  },
  mounted () {
    axios.get('http://127.0.0.1:8000/api/v2/images/')
      .then((response) => {
        console.log(this.images = response.data.items)
here i want to use block.value
        for (let i = block.value; i <= response.data.items.length; i++) {
          console.log(this.tags = response.data.items[i].meta.tags)
          console.log(this.image_path = response.data.items[i].meta.download_url)
          console.log(this.title = response.data.items[i].title)
        }
        console.log(this.image_path)
      })
      .catch((error) => (
        console.log(error)
      ))
  }
}
</script>

Answer 1

您只得到一张图像，因为每张图像都将替换一个变量。

this.tags = response.data.items[i].meta.tags

以此，每次循环时，它将替换旧变量。也许您想要任何阵列？最简单的方法就是传递整个响应！

data () {
  return {
    images: null
  }
},
mounted {
  axios.get('myapi/images')
  .then((response) => {
    this.images = response.data
  })
}

然后，您只需像使用v-for="image of images"一样在模板中使用循环即可。

如何将ID传递到Vue实例

1 个答案: