账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue,在v-for中使用v-model的input标签无法正常输入。
    74
    0
    • 如题目描述的场景下,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>
    • 问题
      怎么解决这种场景下输入框无法正常输入的情况
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部