Vue.js 1.x 与 Vue.js 2.x 表格渲染和字段焦点

Question

前言

我有一个允许用户添加行的表，但用户要求将行添加到表的顶部。

问题:** 使用推荐的拼接(添加到数组顶部)添加新行在 vue 1.x 中效果很好，但在 vue 2.x 中添加第一个新行在添加第一行时失败但添加 2 到 n 行效果很好 - 错误 **vue.min.js:6 TypeError: Cannot read property 'focus' of null 似乎告诉我新添加的行为 null，即使 watch 在添加新行时触发。

如果我遗漏了一些内容，请告诉我 - 下面有适用于 vue 1.x 和 vue 2.x 的 fiddle 可以正确说明问题。

Vue.js 1.x

这在 vue.js v1.x 中运行良好。新行已添加，并且光标聚焦在“日期”列上:

fiddle :https://jsfiddle.net/barbedCoil/n2wrq39t/

以下是添加新行的相关代码:

        onAddTipEntry: function (employeeId, employeeJobCode)
        {
            HS.Main.vm.tipAddNew = true;

            // find last row num
            var last_row = 0;
            _(this.tipEntries).forEach(function (entry)
            {
                if (entry.row_num > last_row) last_row = entry.row_num;
            });

            var newEntry = _.cloneDeep(HS.Main.vm.to_raw(HS.Main.vm.tipEntry));
            newEntry.row_num = (last_row + 1);
            newEntry.person_id = employeeId;
            newEntry.job_code = employeeJobCode;
            newEntry.tip_date = moment(this.businessDate).format("YYYY-MM-DD");
            newEntry.status_code = this.status.new_code;

            // we insert into the top of the array instead of bottom
            this.tipEntries.splice(0, 0, newEntry);
        }

下面是“watch”中的代码，它仅将焦点设置在“日期”字段上:

    watch:
    {
        // we just watch to see when new entry by user
        "tipEntries": function (val, oldVal)
        {
            if (this.tipAddNew === false) return;

            // no error side effect even if fails
            //$("#tip-0").focus();

            // uncomment this to see the vue error
            document.getElementById("tip-0").focus();

            HS.Main.vm.tipAddNew = false;
        },
    },

Vue.js 2.x

在 vue.js 2.x 中，相同的代码在添加的第一行上不起作用，但在后续行上运行良好。新行已添加，但光标未聚焦在日期列上(请参阅下面发生错误的“watch”代码段)。 **我认为这不是真正的问题，而是副作用

这是控制台中显示的错误:

vue.min.js:6 TypeError: Cannot read property 'focus' of null
at pt.tipEntries (test_vue2.js:72)
at So.run (vue.min.js:7)
at $e (vue.min.js:6)
at Array.<anonymous> (vue.min.js:7)
at e (vue.min.js:7)
at <anonymous>

fiddle :https://jsfiddle.net/barbedCoil/4z6q8arn/2/

这是添加新行的相关代码。 这与 v1.x 代码完全相同:

        onAddTipEntry: function (employeeId, employeeJobCode)
        {
            HS.Main.vm.tipAddNew = true;

            // find last row num
            var last_row = 0;
            _(this.tipEntries).forEach(function (entry)
            {
                if (entry.row_num > last_row) last_row = entry.row_num;
            });

            var newEntry = _.cloneDeep(HS.Main.vm.to_raw(HS.Main.vm.tipEntry));
            newEntry.row_num = (last_row + 1);
            newEntry.person_id = employeeId;
            newEntry.job_code = employeeJobCode;
            newEntry.tip_date = moment(this.businessDate).format("YYYY-MM-DD");
            newEntry.status_code = this.status.new_code;

            // we insert into the top of the array instead of bottom
            this.tipEntries.splice(0, 0, newEntry);
        }

这是“watch”中的代码，它仅将焦点设置在“日期”字段上。 与 v1.x 中的代码相同。请注意，错误来自以下焦点:

    watch:
    {
        // we just watch to see when new entry by user
        "tipEntries": function (val, oldVal)
        {
            if (this.tipAddNew === false) return;

            // no error side effect even if fails
            //$("#tip-0").focus();

            // uncomment this to see the vue error
            document.getElementById("tip-0").focus();

            HS.Main.vm.tipAddNew = false;
        },
    },

Answer 1

Renders in Vue 2 occur asychronously 。当您尝试聚焦该元素时，该元素尚未渲染到屏幕上。相反，将焦点排队以在下一次渲染之后发生。

"tipEntries": function (val, oldVal)
{
  if (this.tipAddNew === false) return;

  this.$nextTick(() => document.getElementById("tip-0").focus())
            
  HS.Main.vm.tipAddNew = false;
},

这是您的fiddle updated .