[SOLVED] v-model inside vue draggable lost focus after keypress?

v-model inside vue draggable lost focus after keypress?

I have installed, "vuedraggable": "^4.1.0",

Works very well, and orders well, but inputs lost focus on any keypress action with v-model. The problem is definitely with vuedraggable and v-model.

<draggable
              :list="widgets"
              item-key="name"
              class="list-group"
              ghost-class="ghost"
              @update="saveUpdatedOrder"
            >
....
<el-input
   v-model="element.name"
   class="add-new-item__title"
   placeholder="Title"></el-input>

When I want to change element.name value, this input loses focus, so after every character I need to touch input again and put focus on him, to be able to continue charging text.

Any idea?

Solution

This is probably caused because you use the element.name in the input field and as the key for vue-draggable. Since vue is keeping track of DOM-elements by its key in a v-for loop, I think changing the name will make vue to delete the DOM element and create a new one, with the new key as identifier. That is why it looks like the input is loosing focus, while it actually is another input element.

Changing item-key="name" to another unique property of the widget object, like title or id, will solve the problem. Since you did not provide the widgets array, I cannot be clear on what would be a usable property.