Поле ввода Vue.js теряет фокус после ввода одного символа

Мое поле ввода, привязанное к vue.js, теряет фокус после любого нажатия клавиши. Я нашел это похожее вопрос, но это мне не особо помогает, так как я не использую никаких ключей. Вот мой код шаблона:

<DxColumn data-field="width"
          caption="Spaltenbreite"
          :allowEditing="false"
          cell-template="width-settings" />

<!-- ... -->

<template #width-settings="cell">
    <div>
        <CSwitch :checked.sync="cell.data.data.width.set" size="sm" color="success" />
        <div class="input-group input-group-sm" v-if="cell.data.data.width.set">
            <input type="text" v-model="cell.data.data.width.width" class="form-control text-right" placeholder="auto" />
            <select v-model="cell.data.data.width.unit" class="input-group-append custom-select custom-select-sm">
                <option value="">Bitte wählen</option>
                <option value="DEL">Nicht festlegen</option>
                <optgroup label="Absolute Einheiten">
                    <option value="cm">Zentimeter</option>
                    <option value="mm">Millimeter</option>
                    <option value="in">Zoll</option>
                    <option value="px">Pixel</option>
                </optgroup>
                <optgroup label="Relative Einheiten">
                    <option value="em">-fache der Schriftgröße</option>
                    <option value="%">% des Bildschirms</option>
                </optgroup>
            </select>
        </div>
    </div>
</template>

Это часть определения ячейки DevExtreme dxDataGrid. Как я могу предотвратить то, что поле каждый раз теряет фокус?


html vue.js devexpress devextreme dx-data-grid
person André Reichelt    schedule 14.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

С только этим кодом немного сложно сказать, что происходит, поэтому я собираюсь предположить.

Я вижу, что на входе указано v-model="cell.data.data.width.width", а у родителя - v-if="cell.data.data.width.set", хотя это не должно вызывать проблем, и возможно, что могут быть другие похожие условия, я считаю, что изменение в v-model вызывает повторное оказывать. Если это так, я думаю, вы сможете решить эту проблему, добавив ключ во ввод. Что-то, что не меняется, в идеале что-то вроде cell.data.data.width.id

TL;DR;

Введите ключ

person Daniel    schedule 14.05.2020
comment
Может быть так. Однако похоже, что vue обновляет модель данных при каждом нажатии клавиши, а dxDataGrid повторно визуализирует сетку при любом изменении модели данных. - person André Reichelt; 14.05.2020
comment
да, это мое предположение. Ключ на входе пробовал ставить? - person Daniel; 14.05.2020