时间戳

首页 > 解决方案 > 按钮组件不接收 DataTable 道具

vue.js - 按钮组件不接收 DataTable 道具

问题描述

我正在尝试向我的 vuejs DataTable 添加一个按钮。我创建了一个 Button 组件，我可以将它作为列添加到我的 DataTable 中，但我不能通过 props 发送它。我对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）中获取信息并将其发送到一个方法，在该方法中我将在模态中进行一些处理。非常感谢您提前。

标签： vue.jsvuejs2vue-componentvuexvuetify.js

解决方案

尝试使用this来引用组件范围。

alert(this.data)

并删除：

props: ['data'],

您不希望传入一个名为data. 您想要组件的定义数据property

推荐阅读