Vuejs2 对双向绑定的数组排序会导致对HTML元素重新排序，从而导致错误的控件焦点

更新2：找到了一个使用要索引的对象的唯一属性的解决方案。不希望依赖具有唯一属性的对象，但这样就可以了

感谢所有自愿把头靠在墙上帮我找到解决办法的人

更新：有人告诉我，使用键将有助于跟踪已排序的UI元素，尽管当我尝试将它们用于此目的时，它们不起作用。 为什么？下面提供了代码示例

我的项目简介：

Project有一个表，其中的行和列绑定到由计算属性返回的javascript对象数组

当用户更改单个下拉列表的选定值时，计算属性对双向绑定到HTML元素下拉列表的javascript对象数组项进行排序并返回

computed属性在返回排序的数组项时执行它应该执行的操作，但是原始项上的焦点丢失，并被赋予与原始项位于同一位置的新html元素

在使用双向绑定项目后，Vue2中保持焦点的最佳做法是什么

以下是截图：

HTML:

财务行JSON如下所示：

---

看起来您需要一个不依赖于行位置的键，在本例中是索引，因为您正在对它们重新排序

您可以在financeRows的每个元素中添加一个属性，例如uniqueId，在排序时不会更改，并在v-for中使用它：

---

在v-for节点中是否使用具有唯一值的：键？你能添加一些代码吗？是的，但它们不起作用。我提供了上面的代码。有什么想法吗？成功了。我不想依赖于独特的属性，但既然这个解决方案有效，我就不去管这个任务了，以后可能会再讨论它。非常感谢你！

             <table class="tg" cellspacing="1" cellpadding="5">
              <tr>
                <td v-for="header, index in getFinanceColumns" :key="`financeColumn-${index}`">
                  <span v-if="index > 0">
                    <!--:options="finance.cashOptions"-->
                    <b-form-select v-model="header.header"
                                   :options="getCashOptions('finance', index)"
                                   @change.native="columnChanged('finance', index)"
                                   class="mb-2 selectwidthauto noHighlight">
                    </b-form-select>
                  </span>
                </td>
              </tr>

              <tr v-for="row, index in getFinanceRows" :key="`financeRow-${index}`">
                <td>
                  <b-form-select v-model="row.Term"
                                 @change.native="rowChanged($event, 'finance', index)"
                                 :options="getTermOptions('finance', index)"
                                 :ref="'financeRow' + index"
                                 class="mb-2 selectwidthauto noHighlight">
                  </b-form-select>
                </td>

                <td v-for="column, index2 in row.Programs">
                  <div v-if="!isNaN(row.Term)">
                    <span v-if="!isChanged('finance', finance.fields[index2+1], row)"
                          @click="onClickedProgram('finance', finance.fields[index2+1].header, column, row)"
                          style="cursor: pointer">
                      <span>${{ typeof column.Payment === 'undefined' ? '0.00' : column.Payment }}</span>
                    </span>
                    <span v-else style="font-weight: bold">$0.00</span>
                  </div>
                </td>
              </tr>
            </table>

  getFinanceRows() {
    this.finance.financeRows.sort(function (a, b) {
      return parseInt(a.Term) - parseInt(b.Term)
    })

    return this.finance.financeRows
  },

  getFinanceColumns() {
    this.finance.fields.sort(function (a, b) {
      if (a.header === ' ' || b.header === ' ')
        return 0

      return a.header - b.header
    })

    return this.finance.fields
  },


     finance: {
      fields: [
        { header: ' ', changed: false }, // should always be a whitespace
        { header: 1000, changed: false },
        { header: 2000, changed: false },
        { header: 3000, changed: false },
        { header: 4000, changed: false },

      ],

      cashOptions: [1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000],
      termOptions: defaultFinanceTermOptions,

      financeRows: defaultFinanceRows
    },

{
  Term: 72,
  Programs: [{ Payment: '0.00' }, { Payment: '0.00' }, { Payment: '0.00' }, { Payment: '0.00' }],
  changed: false,
},

<tr v-for="row in getFinanceRows" :key="`financeRow-${row.uniqueId}`">