[Vuejs]-Cant delete item from Table with el-dialog element ui

by

0👍

You can try by setting another ref to hold your id, and set this id in openDialog function:

const { ref } = Vue
const App = {
  setup() {
    const items = ref([{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}])
    const centerDialogVisible = ref(false)
    const id = ref(null)
    const openDialog = (row) => {
      id.value = row.id
      centerDialogVisible.value = true
    }
    const deleteItem = () => {
      items.value = items.value.filter(i => i.id !== id.value)
      centerDialogVisible.value = false
      id.value = null
    }
    const closeModal = () => {
      centerDialogVisible.value = false
    }
    return {
      items, closeModal, openDialog, centerDialogVisible, deleteItem
    };
  },
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus"></script>
<div id="app">
  <el-table :data="items" style="width: 100%" row-key="id">
    <el-table-column prop="id" label="Id" width="180"></el-table-column>
    <el-table-column fixed="right" label="Operations" width="200">
      <template #default="scope">
        <el-button size="small" type="danger" @click="openDialog(scope.row)">delete</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
  </el-table>
  <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span> It should be noted that the content will not be aligned in center by default </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="deleteItem"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</div>

Leave a comment