Question

在任何按键后，绑定到vue.js的输入框都失去了焦点。我发现了this个类似的问题，但这并没有真正帮助我，因为我没有使用任何键。这是我的模板代码：

<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单元定义的一部分。如何防止该领域每次失去焦点？

Answer 1

很难说出仅此代码发生了什么，所以我要猜测一下。

我看到输入内容有v-model="cell.data.data.width.width"，而父级有v-if="cell.data.data.width.set"，而不应该会引起问题，并且可能还有其他类似的条件，我相信v-model中的更改会触发重新渲染。如果是这样，我认为您可以通过向输入添加键来解决它。不会改变的东西，最好是cell.data.data.width.id

TL; DR;

提供输入键

输入一个字符后，Vue.js输入字段便失去焦点

1 个答案:

TL; DR;