Блог

Главная - Вопросы по программированию - Как передать данные из api в метод vue

Как передать данные из api в метод vue

#vue.js

#vue.js

Вопрос:

У меня есть следующие данные

 "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
        },
      }
    ]

Теперь, если я попытаюсь получить ширину изображения внутри атрибута: src, это сработает, но если я попытаюсь передать его методу, это не сработает
, фрагмент HTML-кода будет:

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

где classObject находится метод, который сравнивает ширину и высоту, я также попытался сделать его вычисляемым свойством, приведенный выше код не работает, но если, например, я написал

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

Я вижу ширину внутри src атрибута, что я делаю не так?
Редактировать: код classObject выглядит следующим образом

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

Комментарии:

1. Как это classObject выглядит? Откуда вы знаете, что это не работает?

2. Извините, я сейчас отредактирую код, и я знаю, что он не работает, потому что весь элемент исчезает

3. Исчезает ли элемент из DOM? Если нет, то какой вывод html?

4. Кажется, здесь все работает нормально ~ jsfiddle.net/9ukz50sm . Используйте инструменты разработчика вашего браузера для проверки ошибок и проверки элементов и их классов

5. теперь это работает!!! Извините, что беспокою вас, ребята!

Ответ №1:

Проблема, с которой я столкнулся, заключалась в том, что иногда изображения вообще не было, в противном случае код правильный, поэтому теперь я просто проверяю, есть ли такое изображение

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

Метки: