Элемент удален только при обновлении браузера с помощью Axios - PullRequest
0 голосов
/ 01 мая 2018

У меня есть приложение vuejs 2.5.2, в котором я пытаюсь удалить элемент из API. Я на самом деле удаляю запись, но это видно только при обновлении браузера. У меня в консоли следующее сообщение:

Users.vue?7efa:60 Uncaught (in promise) TypeError: Cannot read property 'splice' of undefined

Я извлекаю из API все нормально, а также могу писать новые записи, которые обновляются в браузере без обновления.

Код для всего компонента:

  <div id="users">
    <div v-for="(user, index) in users" :key="user.id">
        <p>{{user.name}} is my {{user.relation}}<span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeUser(user.id, index)"></span></p>
    <hr />
    </div>

    <form id="users" v-on:submit.prevent="onSubmit" method="POST">
        <input type="text" v-model="name" placeholder="name"/>
        <input type="text" v-model="relation" placeholder="relation"/>
        <input type="submit"  class="btn btn-primary" name="" value="Create User"/>
    </form>

  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      errors: []
    }
  },

  // Fetches users when the component is created.
  created() {
    axios.get('https://sandboxback.herokuapp.com/users')
    .then(response => {
      // JSON responses are automatically parsed.
      this.users = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  },
    methods: {
    onSubmit: function (event) {
        axios.post('https://sandboxback.herokuapp.com/users', {
        name: this.name,
        relation: this.relation
        })
    .then(response => {
    this.users.push(response.data)
    })
    .catch(function (error) {
        console.log(error);
        });
    },//end on submit
    removeUser: function (id, index) {
        axios.delete('https://sandboxback.herokuapp.com/users/'+id)
        .then(response => {
            this.user.splice(index, 1).push(response.data)
        });
    },
    } //end method
}
</script>

1 Ответ

0 голосов
/ 01 мая 2018

должно быть this.users

this.users.splice(index, 1).push(response.data);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...