VUE如何为生成元素绑定变量？

Question

          <div class="classInner" v-for="(item,i) in detailData.goods_param">
            <span class="title width40">{{item.name}}</span>
            <el-input placeholder="请输入内容" class="shortInput" :value="item.value">
            </el-input>
          </div>

这是生成的值。 如何获取修改后的值。或者怎么为循环出的三个input 分别绑定三个变量

Answer 1

你可以为你的input绑定v-model
eg:

...
<el-input placeholder="请输入内容" class="shortInput" :value="item.value" v-model="inputData[i]"></el-input>
...

在你的data中新增一个空对象inputData
你就可以拿到你文本框的值了。

data(){
    return {
        ...
        inputData:{}
    }
}

Answer 2

用v-modul双向绑定啊只有input可以、

Answer 3

<div id="app">
    <div v-for="item in items">
        <span>{{item.a}}</span>
        <input type="text" :value="item.b" v-model="item.b">
    </div>
    修改之后的数值：
    <div v-for="item in items">
        {{item.b}}
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                items: [
                    {
                        a: "标题1",
                        b: "内容1"
                    },
                    {
                        a: "标题2",
                        b: "内容2"
                    },
                    {
                        a: "标题3",
                        b: "内容3"
                    },
                ]

            }
        }
    })
</script>

这是测试的

需要用v-model 才能实现双向绑定，这样你修改的input值才会改变，否则你修改input的内容，并不会改变原数据