CODEWITHSUNDEEP
jsonvue.jsfrontend
Vokhidov
Vokhidov

Reputation: 11

How to pass id into Vue instance

I am using VueJs and wagtail as a backend. I need to display multiple images. I am getting ids of each image but do not know how to pass inside of Vue instance. In this project block.value = id. In image_path i am getting only one image path. That is why i want to use id of image. 

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

Upvotes: 1

Views: 628

Answers (1)

Arc
Arc

Reputation: 1078

You are getting only one image because each image is replacing one variable.

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

With this, every time it loops it replaces the old variable. Maybe you wanted any array? The easiest way to do this is to pass the whole response!

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

Then you just use loops in the template as you are with v-for="image of images".

Upvotes: 2

Related Questions