Я создал свой API с помощью PHP, и вот ссылка: https: // monstajams. сотрудничество / потоковое / отдых / апи / альбом / read.php

Но каждый раз, когда я помещаю его в свой файл Vue.js (Home.vue), используя axios, на интерфейсе не отображаются данные.

Вот мой код ниже:

<ul class="ta-track-list" v-if="faqs && faqs.length">
        <li class="ta-track-card column col-2 flex-column" v-for="faq of faqs">
            <div class="inner">
                <div class="artwork" role="link">
                    <span role="link" style="background-image: url(http://localhost/mymusic/assets/images/artwork/Wizkid-Soco.jpg);">

                    </span>
                        <div class="hover flex align-center justify-center">
                            <button id="webutton" class="ta-secondary play" onclick='playSong()'>
                                <i class="material-icons">play_arrow</i>
                            </button>
                        </div>
                </div>
                    <div class="info">
                        <div class="title white-primary-hover" role="lin">{{ faqs }}</div>  
                        <div class="username light-white-hover" role="link">{{ faq.artist }}</div>  
                        <div class="released">{{ faq.duration }}</div>
                    </div>  
            </div>
        </li>
    </ul>


<script>
import axios from 'axios';

export default {
    name: 'home',
    data: () =>({
        faqs: [],
        errors: []
    }),

    created() {
        axios.get('https://monstajams.co/streaming/rest/api/album/read')
        .then(response => {
            this.faqs = response.data;
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}
</script>
0
naija 8 Окт 2018 в 12:01

2 ответа

Лучший ответ

Проблема в том, что ваш код неправильно предполагает, что axios.get() разрешается в необработанный ответ, но на самом деле он разрешается в оболочка ответа, где необработанный ответ содержится в подсвойстве data оболочки, которое по совпадению имеет то же имя, что и целевое свойство в ответе.

Вы можете изменить обработчик ответа Axios, чтобы получить внутреннее поле data:

axios.get('https://monstajams.co/streaming/rest/api/album/read')
     .then(response => {
       // this.faqs = response.data; // response.data is the raw response, but you need the array within the response (also named "data")
       this.faqs = response.data.data;
     })

демонстрация

Или оставьте свой интерфейс в покое и обновите свой PHP-сервер, чтобы отправлять в ответ только массив:

// FROM THIS RESPONSE:
{
  data: [/* PLAYLIST DATA */]
}

// TO THIS RESPONSE:
[/* PLAYLIST DATA */]
0
tony19 8 Окт 2018 в 16:28

Вы не обновляете свои данные в соответствии с документами Vue.

Относительно реактивных изменений см. Этот документ.

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

let vm = new Vue({
  el: "#app",
  data: {
    todos: []
  },
  methods: {
    updateList() {

      axios.get('https://monstajams.co/streaming/rest/api/album/read')
        .then(res => {

          res.data.data.forEach(item => {

            Vue.set(vm.todos, vm.todos.length, {
              text: item.title,
              done: true
            })

          })

        })

    }
  },
  beforeMount() {
    this.updateList()
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <span>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>
-1
darklightcode 8 Окт 2018 в 11:02