데이터에 추가한 후 Vue에서 PK를 렌더링하지 않음

데이터에 추가한 후 Vue에서 PK를 렌더링하지 않음

데이터를 삽입할 때 pk를 렌더링하는 데 문제가 있습니다.나는 또한 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를 찾을 수 있습니다.

방금 추가한 항목을 삭제하려는 것으로 추정할 수 있습니다.당신의 문제는 당신의 것입니다.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
    })
}

언급URL : https://stackoverflow.com/questions/58072697/vue-wont-render-my-pk-after-adding-to-data