Я не могу отобразить данные из API, используя v-for в vuejs - PullRequest
Новая
       32

Я не могу отобразить данные из API, используя v-for в vuejs

0 голосов
/ 26 апреля 2019

Я не могу получить или отобразить данные из API, но API работает нормально, когда я утешаю проблему.но я не могу отобразить данные в своей таблице, которую я использовал v-потому что я новичок в Vue.js. Я не знаю, как решить эту проблему

Я использую Vue.js 2, метод Axios для подключения к моейAPI

вот мой код 

import axios from 'axios'

export default{
  data(){
    return{
      errorMessage: "",
      successMessage: "",
      users: []
    }
  },
  mounted: function(){
    this.getAllUsers();
  },
  methods:{
    getAllUsers: function(){
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read', { crossdomain: true })
      .then(function(response){
        //console.log(response);
        if(response.data.error){
          app.errorMessage = response.data.message;
        }else{
          app.users = response.data.users;
        }
      });
    }
  }
}

ЭТО ГДЕ Я ХОЧУ ОТОБРАЖАТЬ МОИ ДАННЫЕ 

                <!--test PHP-->
                  <button class="fright addNew btn-sm btn-success" data-toggle="modal" data-target="#exampleModalLong">Add New</button>
                  <p class="errorMessage alert alert-danger" v-if="errorMessage">
                    {{errorMessage}}
                  </p>
                  <p class="successMessage alert alert-success" v-if="successMessage">
                    {{successMessage}}
                  </p>
                  <table class="table">
                    <tr>
                      <th>ID</th>
                      <th>User Name</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Edit</th>
                      <th>Delete</th>
                    </tr>
                    <tr v-for="user in users">
                      <td>{{user.id}}</td>
                      <td>{{user.username}}</td>
                      <td>{{user.name}}</td>
                      <td>{{user.email}}</td>
                      <td><button class="btn btn-sm btn-success">ADD</button></td>
                      <td><button class="btn btn-sm btn-danger">DELETE</button></td>
                    </tr>
                  </table>

Ответы [ 3 ]

2 голосов
/ 26 апреля 2019

Вы не можете сделать 

app.users = response.data.users;

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

Этот пользовательский объект присутствует в текущем контексте и доступен через ключевое слово this.

Попробуйте: 

if(response.data.error){
    this.errorMessage = response.data.message;
}
else{
    this.users = response.data.users;
}
1 голос
/ 26 апреля 2019

Спасибо, ребята, за ваше время, я использовал ваш код, но с небольшими исправлениями

это последний код, который работает 

    getAllUsers: function(){
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read', { crossdomain: true })
      .then((response) => {
        //console.log(response);
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.users = response.data.users;
        }
        });
    }
0 голосов
/ 26 апреля 2019

Возможно, вы хотите установить некоторую информацию в поле данных users.Вам нужно сделать что-то вроде: 

if (response.data.error) {
    this.errorMessage = response.data.message;
} else {
    this.users = response.data.users;
}

Объяснение : Vue реагирует на изменения в data и props.Делая this.users = response.data.users, вы сообщаете Vue, что users изменился, и затем Vue выполнит повторный рендеринг в зависимости от того, как вы использовали users внутри вашего шаблона.

...