关于数组

Question

[！[Firefox控制台] [1]] [1]在我的Vue应用程序中，我尝试使用mdb-datatable，该表读取data（）并相应地设置行。我用Ajax加载数据后，以编程方式设置行数据。在一栏中，我需要添加一个按钮，并且它需要调用一个函数。我正在尝试将onclick函数添加到具有“状态按钮”类的所有按钮上，但是会发生一些奇怪的事情。

当我打印HtmlCollection时，它内部有一个按钮，这是预期的，但我无法到达proceButtons [0]，它是未定义的。 progressButtons.length也显示0长度，但我在控制台中看到该按钮。

我也尝试添加onclick函数，但是可能“ this”引用发生了变化，并且出现了诸如“ proceedStatus不是函数”之类的错误，它在外部作用域中看不到任何东西。

<mdb-datatable
                :data="tableData"
                :searching="false"
                :pagination="false"
                :responsive="true"
                striped
                bordered/>

    export default {
        name: "Applications",
        mixins: [ServicesMixin, CommonsMixin],
        components: {
            Navbar,
            Multiselect,
            mdbDatatable
        },
        data () {
            return {
                statusFilter: null,
                searchedWord: '',
                jobRequirements: [],
                applications: [],
                options: ['Awaiting', 'Under review', 'Interview', 'Job Offer', 'Accepted'],
                tableData: {
                    columns: [
                        {
                            label: 'Name',
                            field: 'name',
                            sort: 'asc',
                        },
                        {
                            label: 'Date',
                            field: 'date',
                            sort: 'asc'
                        },
                        {
                            label: 'Compatibility',
                            field: 'compatibility',
                            sort: 'asc'
                        },
                        {
                            label: 'Status',
                            field: 'status',
                            sort: 'asc'
                        },
                        {
                            label: 'Proceed Application Status',
                            field: 'changeStatus',
                        }
                    ],
                        rows: []
                }
            }
        }

            fillTable(applications) {
                let statusButtonId = 0;

                applications.forEach(application => {
                    this.tableData.rows.push({
                        name: application.candidateLinkedIn.fullName,
                        date: this.parseDateFromDateObject(application.applicationDate),
                        compatibility: this.calculateJobCompatibility(application.candidateLinkedIn.linkedInSkillSet),
                        status: application.applicationStatus,
                        changeStatus: '<button type="button" class="btn-indigo btn-sm m-0 status-button"' +
                            ' style="margin-left: 1rem">' +
                            'Proceed Status</button>',
                        candidateSkillSet: application.candidateLinkedIn.linkedInSkillSet
                    });

                    statusButtonId++;
                });
            },
            addEventListenersToButtons() {
                let proceedButtons = document.getElementsByClassName("status-button")
                console.log(proceedButtons);
                console.log(proceedButtons[0])
                console.log(proceedButtons.item(0))
                /*
                proceedButtons.forEach(button => {
                    button.addEventListener("click",this.proceedStatus);
                });
                */
            },


  [1]: https://i.stack.imgur.com/zUplv.png

Answer 1

来自MDN：

获取具有“ test”类的第一个元素，如果没有匹配的元素，则为undefined：

document.getElementsByClassName('test')[0]

因此，即使长度为0，未定义也意味着不匹配...

由于这不是数组，所以您不会遇到越界异常。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

关于数组

您无法索引从getElementsByClassName返回的列表。

您可以将其转换为数组，然后对其进行索引。

ES6

let proceedButtons = document.getElementsByClassName("status-button")
const arr = Array.from(proceedButtons);
console.log(arr[0]);

老派

const arr = []
Array.prototype.forEach.call(proceedButtons, function(el) {
    arr.push(el);
});
console.log(arr[0]);

Document.getElementsByClassName的长度为0，但内部有元素

1 个答案:

关于数组