Vue.js的1.x與2.x的Vue.js表渲染和外地重點

Question

前言

我有一個表，允許用戶添加行，但用戶的需求是要添加的行在桌子的頂端。

問題：**使用建議的拼接（添加到數組頂部）添加一個新行可以在vue 1.x中正常工作，但在vue 2.x中添加第一個新行無法添加第一行但工作很好加入2到n行 - 錯誤** vue.min.js：6 TypeError：無法讀取屬性'焦點'爲空似乎告訴我，即使手錶觸發添加新添加的行爲空一個新的行。

如果我遺漏了一些東西，請ping我 - 這兩個vue 1.x和vue 2.x下都有正確的解決問題的小提琴。

Vue.js 1.x的

這vue.js v1.x.工作正常新行，並將光標集中在日期列：

小提琴：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相同的代碼不是工作在第1行添加，但在後續行工作正常。新行被添加，但光標爲而不是，重點在日期列（請參見下面的'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/

下面是相關的代碼，增加了一個新的行。 這是完全相同的代碼的版本1.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。