Vue.js 1つの文字の入力後に入力フィールドのフォーカスが失われます

Question

入力フィールドを持つビューがあります。入力フィールドには、指定されたボタンを乗算することができます。問題は、charの入力後に入力フィールドのフォーカスが失われることです。別のチャーを入力するにはもう一度クリックする必要があります。

誰かが問題である可能性がある手掛かりを持っていますか？

マイモデル：

'model': [ 
    ..., 
    'filter': [ 
     ..., 
     'something': [ 
      'string' 
     ] 
    ] 
] 

マイコード：

<div v-for="(something, index) in model.filter.something" v-bind:key="something"> 
    <input type="text" v-model.trim="model.filter.something[index]"/> 
</div> 

Answer 1

問題は、あなたがkeyとして変化する値を使用していることです。 Vueは、keyがアイテムのユニークな識別子を示すと予想しています。変更すると、新しいアイテムになり、再レンダリングする必要があります。

以下のスニペットでは、両方とも同じデータソースを使用する2つのループがあります。最初の設定は、設定した方法に合わせて設定されています。 2番目は代わりにindexを使用します（これは必要ではないかもしれませんが、編集するもの以外のものを使用することです;この例では、とにかくkeyは必要ありません）。最初のものはあなたが記述した焦点の喪失を示し、2番目のものは期待どおりに動作します。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    'model': { 
 
     'filter': { 
 
     'something': [ 
 
      'string' 
 
     ] 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="(something, index) in model.filter.something" v-bind:key="something"> 
 
    <input type="text" v-model.trim="model.filter.something[index]" /> 
 
    {{something}} 
 
    </div> 
 
    <div v-for="(something, index) in model.filter.something"> 
 
    <input type="text" v-model.trim="model.filter.something[index]" :key="index" /> 
 
    {{something}} 
 
    </div> 
 
</div>