Vue не будет отображать мой PK после добавления к данным - PullRequest
Новая
       6

Vue не будет отображать мой PK после добавления к данным

1 голос
/ 24 сентября 2019

У меня проблема с отображением ПК при вставке данных.я также буду использовать pk для удаления записей. 

<template>
  <div class="hello">
    <p>Username</p>
    <input type="text" v-model="users_name">
    <p>Mac Address</p>
    <input type="text" v-model="msgBody">
    <br><br>
    <input 
      type="submit" 
      value="Add" 
      @click="addMaclist({ users_name: users_name, mac_id: msgBody })" 
      :disabled="!users_name || !msgBody">

    <hr/>
    <h3>Mac Address on Database</h3>
    <p v-if="maclists.length === 0">No Maclists</p>
    <ul>
    <li v-for="(users, index) in maclists" :key="index">
    <p>{{ index }}</p>
    <p v-html="users.users_name"></p>
    <p v-html="users.msgBody"></p>
    <input type="submit" @click="deleteMaclist(users.pk)" value="Delete" />
    </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: "Maclists",
  data() {
    return {
      users_name: "",
      msgBody: "",
    };
  },
  computed: mapState({
    maclists: state => state.maclists.maclists
  }),
  methods: mapActions('maclists', [
    'addMaclist',
    'deleteMaclist'
  ]),
  created() {
    this.$store.dispatch('maclists/getMaclists')
  }
};
</script>

вот мой модуль json rest 

[
    {
        "url": "http://127.0.0.1:8000/api/maclist/24/",
        "users_name": "test1",
        "mac_id": "test1",
        "pk": 24
    }
]

для addMaclist и deleteMaclist ниже. 

import maclistService from '../../services/maclistService'

const state = {
  maclists: []
}

const getters = {
  maclists: state => {
    return state.maclists
  }
}

const actions = {
  getMaclists ({ commit }) {
    maclistService.fetchMaclists()
    .then(maclists => {
      commit('setMaclists', maclists)
    })
  },
  addMaclist({ commit }, maclist) {
    maclistService.postMaclist(maclist)
    .then(() => {
      commit('addMaclist', maclist)
    })
  },
  deleteMaclist( { commit }, msgId) {
    maclistService.deleteMaclist(msgId)
    commit('deleteMaclist', msgId)
  }
}

const mutations = {
  setMaclists (state, maclists) {
    state.maclists = maclists
  },
  addMaclist(state, maclist) {
    state.maclists.push(maclist)
  },
  deleteMaclist(state, msgId) {
    state.maclists = state.maclists.filter(obj => obj.pk !== msgId)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

здесь ошибка при удалении не может найти pk

DELETE http://localhost:8080/api/maclist/undefined/ 404 (не найдено)

, но если я обновлю страницу вручнуюперед выполнением кнопки удаления он сможет найти pk

1 Ответ

1 голос
/ 24 сентября 2019

Я могу только предположить, что вы пытаетесь удалить записи, которые вы только что добавили.Ваша проблема в вашем addMaclist действии ... 

addMaclist({ commit }, maclist) {
  maclistService.postMaclist(maclist)
    .then(() => {
      commit('addMaclist', maclist)
    })
}

Когда вы фиксируете maclist, это тот же объект, отправленный из вашего компонента, который имеет только эти свойства ... 

{ users_name: users_name, mac_id: msgBody }

Если ваш REST API хорошо сделан и отвечает недавно сохраненной модели, вы должны использовать это вместо 

addMaclist({ commit }, maclist) {
  maclistService.postMaclist(maclist)
    .then(model => {
      commit('addMaclist', model) // add the model from the response
    })
}
...