时间戳

首页 > 解决方案 > 对 2 路绑定的数组进行排序会导致 HTML 元素重新排序，从而导致错误的控制焦点

vuejs2 - 对 2 路绑定的数组进行排序会导致 HTML 元素重新排序，从而导致错误的控制焦点

问题描述

更新 2：找到一个可行的解决方案（使用对象的唯一属性进行索引）。不想依赖具有独特属性的对象，但这会做。

感谢所有自愿将头撞到墙上帮助我找到解决方案的人！

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

我的项目的简要说明：

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

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

计算属性在返回排序后的数组项时执行它应该执行的操作，但是对原始项的关注丢失并被赋予与原始项位于同一位置的新 html 元素。

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

以下是截图：

原始值

在选择期间

在此处输入图像描述

HTML：

             <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
    },

“财务行”JSON 如下所示：

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

标签： vuejs2

解决方案

看起来您需要一个不依赖于行位置的键，在这种情况下index，因为您正在重新排序它们。

您可以在 的每个元素内添加一个属性，当您进行排序并在 中使用它时financeRows，类似的东西uniqueId不会改变v-for：

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

推荐阅读