javascript - vue.js 使用v-model双向绑定对象时，在chrome下input的光标异常

Question

通过对象动态生成input，在chrome下鼠标总是指向末尾的字符，textarea不会出现此问题
大家有遇到过这种情况吗？

<p id="example">
    <p class="form-group" v-for="(key,item) in detail">
        <my-component :form="item" ></my-component>
    </p>
</p>

var MyComponent = Vue.extend({
    props:['form'],
  template: '<label>{{ form.title }}</label>' +
        '<input ' +
        'class="form-control modal-input" ' +
        ':name="form.name" ' +
        ':value="form.value" ' +
        ':type="form.inputType" ' +
        'v-model="form.value" ' +
        ':placeholder="form.placeHolder" />' +
        '<p class="help-block">{{ form.help }}</p>',
    
})
    
Vue.component('my-component', MyComponent)
    
    
// 创建根实例
new Vue({
  el: '#example',
    data:{
        detail:{
        "vname": {
            "title": "vname",
            "name": "vname",
            "value": "",
            "help": "",
            "inputType": "text"
        },
        "vcode": {
            "title": "vcode",
            "name": "vcode",
            "value": "",
            "help": "",
            "inputType": "text"
        },
     }
    }
})

演示地址
http://runjs.cn/code/twbnkmux

Answer 1

把 ':value="form.value" ' + 去了...
双向绑定不要和value一起用...道理自己琢磨下就知道了...