How to pass data from api to a vue method

Question

I have the following data

"meta": {
    "total_count": 17
},
"items": [
    {
        "id": 80,
        "meta": {
            "type": "",
            "detail_url": "",
            "html_url": "",
            "slug": "",
            "first_published_at": ""
        },
        "title": "some title",
        "image": {
            "id": 46,
            "meta": {
                "type": "wagtailimages.Image",
                "detail_url": "some url",
                "download_url": "/media/original_images/im.png"
            },
            "title": "im.png",
            "width": 100,
            "height": 80
        },
      }
    ]

Now if I try to get the width of an image inside :src attribute it works but if I try to pass it to a method it doesn't , a snippet of the HTML code is:

<li v-for="(item, index) in response_data">
  <a v-bind:href="item.meta.html_url">
    <div class="icon" :class="classObject(item.image.width,item.image.height)">
      <img v-if="item.image" v-bind:src="item.image.meta.download_url" alt=""/>
      <img v-else src="{% static 'images/logo-dummy.svg' %}" alt="logo-dummy.svg"/>
    </div>

where classObject is a method that compares the width and the height, I tried also to make it a computed property, the above code doesn't work but if for example I wrote

<img v-if="item.image" v-bind:src="item.image.width">

I can see the width inside the src attribute, what am I doing wrong? Edit: classObject code is the following

     classObject: function (width, height) {
        if (width > height) return 'icon1'
          return 'icon2'     
      },

What does classObject look like? How do you know it's not working? — Phil
– Phil, Commented Jan 19, 2021 at 5:34
Sorry, I'll edit the code now, and I know it's not working because the whole element is disappearing — Miriam Arbaji
– Miriam Arbaji, Commented Jan 19, 2021 at 5:40
Does the element disappear from the DOM? If not, what's the html output? — Dan
– Dan, Commented Jan 19, 2021 at 5:48
Seems to work fine here ~ jsfiddle.net/9ukz50sm. Use your browser's dev-tools to check for errors and to inspect the elements and their classes — Phil
– Phil, Commented Jan 19, 2021 at 5:51

Miriam Arbaji · Accepted Answer · 2021-04-12 13:11:28Z

2

The problem I encountered was because sometimes there was no image at all, otherwise the code is correct so now I just check if there's an image like this

<div v-if="item.image" :class="classObject(item.image.width,item.image.height)">
      <img v-bind:src="item.image.meta.download_url" alt=""/>
    </div>

edited Apr 12, 2021 at 13:11

answered Jan 19, 2021 at 8:19

Miriam Arbaji

3191 gold badge3 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data from api to a vue method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related