无法获取 ID 来执行删除方法（VueX、VueJS）

Question

我跟着这个人做我的任务：“调用 API 删除项目” https://www.youtube.com/watch?v=cjRst4qduzM&t=967s，从 12:35 开始。根据这个人的说法，如果你想实现 delete 方法，有两个步骤：首先，你通过获取 ID 从状态中删除项目，然后使用 filter 方法过滤你 selected 的 id。（但是当你重新加载页面项目时仍然可用）。其次，您调用 api 到服务器以删除服务器中的项目。

我卡在了第一步，虽然我无法删除 ID，但我可以 select 选择公司的 ID。这是我的组件

  <div>

    <v-data-table

      v-model="selected"

      :search="search"

      :headers="headers"

      :items="items"

      show-select

      hide-default-footer

      disable-pagination

      class="elevation-1"

    >

      <template v-slot:item.actions="{ item }">

        <v-menu offset-y>

          <template v-slot:activator="{ on, attrs }">

            <v-btn class="ma-2" v-bind="attrs" v-on="on" icon>

              <v-icon>mdi-dots-vertical</v-icon>

            </v-btn>

          </template>

          <v-list>

            <v-list-item @click="editCompany(item)">

              <span>Edit company</span></v-list-item

            >

            <v-list-item @click="deleteCompany()">

              <span style="color: #e12d39"> Delete company</span>

            </v-list-item>

          </v-list>

        </v-menu>

      </template>

    </v-data-table>

  </div>

</template>

<script>

import { mapGetters } from "vuex";

export default {

  props: {

    items: {

      type: Array,

    },

    search: { type: String },

  },

  data() {

    return {

      headers: [

        { text: "Name", align: "start", value: "name" },

        { text: "Phone Number", value: "phoneNumber" },

        { text: "Website", value: "website" },

        { text: "Address", value: "address" },

        { text: "Currency", value: "currency" },

        { text: "Image Name", value: "imageName" },

        { text: "Actions", value: "actions", sortable: false },

      ],

    };

  },

  computed: {

    ...mapGetters({ deletedCompany: "companies/deletedCompany" }),

  },

  methods: {

    deleteCompany(delID) {

      console.log("dispatch:", delID);

      this.$store.dispatch("companies/deleteCompany", delID);

    },

  },

};

</script>

这是我的商店从“nprogress”导入 NProgress；

export const namespaced = true;

import Vue from "vue";

import Vuex from "vuex";

import { create } from "@/http/companies";

import VueToast from "vue-toast-notification";

import "vue-toast-notification/dist/theme-sugar.css";

import { getCompanies } from "@/http/companies";

// import { deleteCompanies } from "@/http/companies";

Vue.use(Vuex);

Vue.use(VueToast);

export const state = {

  companies: [],

  selectedCompanyId: "",

};

export const getters = {

  allCompanies: (state) => state.companies,

  selectedCompanyId: (state) => state.selectedCompanyId,

  deletedCompanyId: (state) => state.deletedCompanyId,

  selectedCompany: (state) => state.companies.find((c) => c.id === state.selectedCompanyId),

  deletedCompany: (state) => state.companies.filter((c) => c.id != state.deletedCompanyId)

};

export const mutations = {

  GET_COMPANIES(state, companies) {

    state.companies = companies;

  },

  DELETE_COMPANIES(state, deletedCompanyId) {

    console.log("mutations:", deletedCompanyId)

    state.deletedCompanyId = deletedCompanyId;

  },

  SET_SELECTED_COMPANY_ID(state, selectedCompanyId) {

    console.log(selectedCompanyId)

    state.selectedCompanyId = selectedCompanyId

  },

  STORE_ID(state, payload) {

    state.routeId = payload;

  },

};

export const actions = {

  storeID({ commit }, payload) {

    commit("STORE_ID", payload);

  },

  getCompanies({ commit }) {

    return getCompanies(NProgress.start()).then((response) => {

      commit("GET_COMPANIES", response.data);

      NProgress.done();

    });

  },

  selectCompany({ commit }, companyId) {

    commit("SET_SELECTED_COMPANY_ID", companyId, NProgress.start());

    console.log("đây là id", companyId)

    NProgress.done();

  },

  deleteCompany({ commit }, delId) {

    console.log("actions:", delId)

    return commit("DELETE_COMPANIES", delId);

  },

  registerCompany({ commit }, companyInfor) {

    return create(companyInfor)

      .then(() => {

        Vue.$toast.open({

          message: "Create company successfully!",

          type: "success",

          duration: 3000,

          dismissible: true,

          position: "top-right",

        });

      })

      .catch((error) => {

        commit("");

        Vue.$toast.open({

          message: error,

          type: "error",

          duration: 3000,

          dismissible: true,

          position: "top-right",

        });

      });

  },

};

https://www.loom.com/share/1eb12a448aca41df8e4c77cdc8931002?focus_title=1&muted=1&from_recorder=1

Answer 1

通过点击事件处理程序传递 id <v-list-item @click="deleteCompany(item.id)">:


    methods: {

     deleteCompany(delID) {

      console.log("dispatch:", delID);

      this.$store.dispatch("companies/deleteCompany", delID);
      // or this.$store.dispatch("companies/deleteCompany", delID);
    },

  },

Answer 2

您忘记将参数作为 item_id 传递给函数

          <v-list-item @click="deleteCompany(item)">

也许这样就可以了

无法获取 ID 来执行删除方法（VueX、VueJS）

Can't get ID to do delete method (VueX,VueJS)

api

vue.js

vue-component

axios

vuex