Как в el-table вставить нужный мне id, для перехода на страницы?

Question

[Tikit]

Как в el-table вставить нужный мне id, для перехода на страницы. В обычных таблицах я использую "vue-router", но здесь не получается, выдаёт ошибку. Попробовал другим путём, повесил на кнопку такой метод:

handleEdit(row){
            return this.$router.push({
                path:'/protocol_information/:id/edit/',
                params:{
                    id:row.id
                }
            })
        },

И я перехожу по этому пути "/protocol_information/:id/edit/", а мне надо в этот :id, вставить "id" который я должен получить из той строки, с которой я пытаюсь перейти на другую страницу.

<template>
    <el-table :data="TableData" style="width: 100%">
        <el-table-column prop="id" label="№ ID" width="180" />
        <el-table-column prop="num_contract_reg" label="№ договора" width="240" />
        <el-table-column prop="name_organization_reg" label="Название организации" width="240" />
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    name: "SpisokLabelsComponent",
    data(){
        return{
            TableData: null,
        }
    },
    mounted() {
        this.getPoluhenie()
    },
    methods: {
        getPoluhenie(){
            axios.get('/api/protocolsbd', {
                })
                .then(res => {
                    this.TableData = res.data.data;
                    console.log(res)
                })
        },
        handleEdit(row){
            return this.$router.push({
                path:'/protocol_information/:id/edit/',
                params:{
                    id:row.id
                }
            })
        },
    }
}
</script>

Answer 1

[0xD34F]

handleEdit(row){

@click="handleEdit(scope.$index, scope.row)"

Сколько параметров получает метод handleEdit? А сколько передаёте ему в обработчике клика? Устраните это печальное несоответствие.

path:'/protocol_information/:id/edit/',
params:{
    id:row.id
}

Вместо path должен быть name. Конечно, если таковой указан при определении маршрута.

Или, вырезаете params и вставляете нужный id сразу в строку:

path: `/protocol_information/${row.id}/edit/`,

Comments

[Tikit]

Сделал так, переходит по пути, но в пути указывает "/protocol_information/undefined/edit/", что id не определён. Когда вместо патч пишу path пишу name, кнопка не срабатывает.

<template>
    <el-table :data="TableData" style="width: 100%">
        <el-table-column prop="id" label="№ ID" width="180" />
        <el-table-column prop="num_contract_reg" label="№ договора" width="240" />
        <el-table-column prop="name_organization_reg" label="Название организации" width="240" />
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    name: "SpisokLabelsComponent",
    data(){
        return{
            TableData: null,
        }
    },
    mounted() {
        this.getPoluhenie()
    },
    methods: {
        getPoluhenie() {
            axios.get('/api/protocolsbd', {})
                .then(res => {
                    this.TableData = res.data.data;
                    console.log(res)
                })
        },
        handleEdit(row) {
            return this.$router.push({
                path: `/protocol_information/${row.id}/edit/`,

            })
        },
    }
}
</script>

<style scoped>

</style>

[0xD34F]

Tikit, убил бы.

Попробуйте прочитать ответ целиком ещё раз.

[Tikit]

Спасибо Вам за ответ. Получилось так

<router-link :to="{name: 'protocols_information.edit', params: {id: scope.row.dogovor_id}}">
                    <el-button size="small">Edit</el-button>
                </router-link>

[0xD34F]

Tikit, так, а что там с handleEdit? Так и не удалось до двух сосчитать? Это печально.

[Tikit]

0xD34F, печально что по Вашему совету ничего не получилось, надо уметь объяснять. Я только начинаю программировать.

[0xD34F]

Tikit, кому объяснять? Vue - это не для начинающих. Забудьте о его существовании на ближайшие полгода и займитесь основами программирования. Чтобы вот такой ерунды, как в этом вопросе, НЕ БЫЛО.

[Snowyyy]

Нормальный вопрос, могли бы и помочь. Для этого форум и существует, человек решил по своему вопрос, в чём проблема?

[0xD34F]

Snowyyy, если бы вы ознакомились с правилами, то знали бы, что

1. Здесь не форум
2. Использовать несколько аккаунтов запрещено

Нормальный вопрос

Ненормальный.

Не уметь считать до двух - позорище просто невероятное.