Vue，在v-for中使用v-model的input标签无法正常输入。

Question

• 如题目描述的场景下，input标签会出现输入一个字符后input会自动失焦，没有办法正常输入。

• 复现条件

  1. 使用 vue create project
  2. 使用 v-for v-model
  3. 使用 input 标签

• 代码如下

  <!--App.vue文件下的代码-->
  <template>  
   <div id="app">  
   <input 
    v-for = "(url,idx) in inputData"  
    :key = "url + idx"  
    v-model  ="inputData[idx]"
   />  
   </div></template>  
  
  <script>  
  
    export default {  
      name: 'App',  
    data() {  
        return {  
          inputData: [1]  
        }  
      }  
    }  
  </script>
  

• 猜测
  这种情况只会发生在子组件中。
  因为以<script>的形式引入Vue不会复现这个问题。
  代码如下

  <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>  
  
  <div id="app">  
   <input type="text" v-for="(url,idx) in inputData" v-model="inputData[idx\]">  
  </div>  
  
  <script>  
    new Vue({  
      el:'#app',  
      data(){  
            return {  
              inputData:['a'],  
        }  
      }  
    })  
  </script>

• 问题
  怎么解决这种场景下输入框无法正常输入的情况

Answer 1

应该就是 :key 的问题，因为 :key 和输入的内容绑定，被反复重置为新的 <input>

Answer 2

上面的数据是个整数：inputData: [1]，在 url+idx 不是 10 而是 2，似乎会造成 key 混乱。不是很确定是不是这个原因，可以试试看。key 里面尽量不要用 idx，除非数组数据严格按原来的 index 排列。