按钮组件不接收 DataTable 道具答案

【问题标题】：Button component does not receive DataTable props按钮组件不接收 DataTable 道具
【发布时间】：2020-02-12 03:26:45
【问题描述】：

我正在尝试向我的 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) 中获取信息并将其发送到一个方法，在该方法中我将在模态中进行一些处理。非常感谢您。

【问题讨论】：

嗨 Luccaz，欢迎来到 stackoverflow 社区。为了获得帮助，我建议您将您的语言翻译成 Stackoverflow 平台语言（“英语”）。
刚刚翻译和编辑了他的问题，如果 OP 接受了编辑，我们可以有英文书面问题
当你在组件中访问你的道具时，你需要使用这个关键字。因此，当您在方法内部访问它时，您使用：this.data。如果您与我们分享控制台日志错误也会很有帮助，这样我们就可以轻松地关注您的代码中可能出现的错误。
警报返回我未定义。 Vue.component('edit-button', { template: ` `, props: ['data'], methods : { goToUpdatePage: function(){ alert(this.data) } } });

标签： vue.js vuejs2 vue-component vuex vuetify.js

【解决方案1】：

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

alert(this.data)

然后删除：

props: ['data'],

你不想要一个名为 data 的传入 prop。你想要组件的定义数据property

【讨论】：