Question

前言

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

问题：**使用推荐的拼接添加新行（添加到数组顶部）在vue 1.x中运行正常但在第2行添加第2行时，第2行失败但工作正常添加2到n行 - 错误** vue.min.js：6 TypeError：无法读取属性'focus'的null 似乎告诉我新添加的行为null即使在添加新行时会发生火灾。

如果我要留下一些东西，请给我打电话 - 下面的vue 1.x和vue 2.x都有小问题，可以正确地解决问题。

Vue.js 1.x

这在vue.js v1.x中运行正常。添加新行并将光标聚焦在Date列上：

小提琴：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:
    {
        // 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中，相同的代码不在添加的第一行上工作，但在后续行上工作正常。添加了新行，但光标不聚焦在Date列上（请参阅下面出现错误的'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>

小提琴：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);
        }

以下是“监视”中的代码，它只关注日期字段。 与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。

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

1 个答案: