ОБНОВЛЕНИЕ 2 : найдено решение, которое работает (используя уникальные свойства объекта для индексации).Не хотел полагаться на объект, обладающий уникальными свойствами, но это подойдет.
Спасибо всем, кто добровольно ударился головой о стену, чтобы помочь мне найти решение!
ОБНОВЛЕНИЕ : Мне сказали, что использование ключей поможет отслеживать отсортированные элементы пользовательского интерфейса, хотя, когда я пытаюсь использовать их для этой цели, они не работают.Зачем?(Примеры кода приведены ниже)
Краткое описание моего проекта:
В проекте есть таблица со строками и столбцами, привязанными к массиву объектов javascript, который возвращается вычисляемым свойством .
Вычисленное свойство сортирует и возвращает элементы массива объектов javascript, которые имеют двустороннюю привязку к элементам HTML (раскрывающимся спискам), когда выбранное значение одного раскрывающегося списка изменяется пользователем.
Свойство computed делает то, что должно, когда возвращает отсортированные элементы массива, но фокус на исходном элементе теряется и передается новому 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,
},