Компонент кнопки не получает реквизиты DataTable - PullRequest
Новая
       69

Компонент кнопки не получает реквизиты DataTable

0 голосов
/ 15 октября 2019

Я пытаюсь добавить кнопку в мою таблицу данных vuejs. Я создал компонент Button, и я могу добавить его в виде столбца в моей DataTable, но я не могу отправить его через реквизиты. У меня нет полного знания vue, наверняка я делаю что-то не так. 


  Vue.component('edit-button', {
        template: `
        <button class="btn btn-xs btn-primary" @click="goToUpdatePage">Edit</button>
    `,
        props: ['data'],
        methods: {
            goToUpdatePage: function(){
                alert(data)
            }
        }
    });

    export default {


        data() {
            return {
                numeroPagina: 1,

                tiposNatureza: [],
                utisMoveis: [],
                list: [],

                filtros: {
                    dataInicial: new Date().toISOString().split('T')[0],
                    dataFinal: new Date().toISOString().split('T')[0],
                    selectedUtisMoveis: [],
                    selectedStatus: [],
                    selectedTipoNatureza: [],
                    selectedTipoPesquisa: ''
                },

                tabela: {
                    columns: [
                        {

                            // <a data-toggle="modal" data-target="#ExemploModalCentralizado">${row.DESCRICAO}</a>
                            label: 'Descrição', representedAs: function (row) {
                                if (row.DESCRICAO) return `<a data-toggle="modal" data-target="#ExemploModalCentralizado">${row.DESCRICAO}</a> <button onclick="alertMe('TESTE')">TESTE</button>`
                                else return '<b>Sem informação</b>'
                            }, interpolate: true
                        },
                        {
                            label: 'Quantidade', representedAs: function (row) {
                                return `<p><span class="label label-primary" style="font-size: 17px">${row.QTD}</span></p>`
                            }, interpolate: true
                        },

                        {

                            label: 'Action',
                            component: 'edit-button',
                            data: 'row',
                            component_data: {
                                path: 'contact',
                                action: 'update'
                            }
                        }

                    ],
                    rows: []
                }

            }
        }




        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h2 v-if="quantidadeDeRegistros > 0">Foram encontrado(s) {{ quantidadeDeRegistros }}
                            resultado(s)</h2>
                    </div>
                    <div class="ibox-content no-padding" style="font-size: 15px">
                        <datatable :columns="tabela.columns" :data="tabela.rows"></datatable>
                        <datatable-pager v-model="numeroPagina" type="abbreviated" :per-page="8"></datatable-pager>
                    </div>
                </div>
            </div>
        </div>

Мне нужно создать кнопку, которая берет информацию из выбранной строки (row.DESCRIPTION) и отправляетэто к методу, где я буду иметь дело с модальным. Заранее большое спасибо.

1 Ответ

0 голосов
/ 24 октября 2019

Попробуйте использовать this для ссылки на область действия компонента. 

alert(this.data)

И удалите: 

props: ['data'],

Вы не хотите, чтобы переданная в опору называлась data. Требуются данные, определенные компонентом property

...