My vue.js-bound input box loses its focus after any keypress. I found this similar question, but it doesn't really help me, as I don't use any keys. Here's my template code:
<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>
This is part of a DevExtreme dxDataGrid cell definition. How can I prevent the field from losing it's focus every time?
It's a bit hard to tell what is going on with this code only , so I'm going to take a guess.
I see the input has v-model="cell.data.data.width.width"
and a parent has v-if="cell.data.data.width.set"
while that shouldn't cause issues, and it may be possible that there may be other similar conditionals, I believe the change in v-model
is triggering a re-render. If that is the case, I think you may be able to resolve it by adding a key to the input. Something that doesn't change, ideally something like cell.data.data.width.id
Give the input a key
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.