请教攻城狮们,自学练习的时候碰到一个问题,困扰我两天了,还没有解决,请不吝指点 !
1.在input输入框中输入任意值,所有的input全都会显示,如何给每个input 不同的v-model?
情况如下:
2.提交保存的时候,怎么样才能输出下方res这样的对象集合?
res: {
a: { red: "8", yellow: "8", blue: "8" },
b: { red: "8", yellow: "8", blue: "8" },
c: { red: "8", yellow: "8", blue: "8" },
},
3.test1,test2 数组的值,不是固定的3个,也可能是8个 10个!
test1: ["a", "b", "c"],
test2: ["red", "yellow", "blue"],
如图:
<div class="dialogBodyEl dial" id="content">
<li v-for="(item1, index1) in test1">
{{ item1 }}:
<span v-for="(item2, index2) in test2">
{{ item2 }}
<el-input style="width: 100px" type="text" v-model="res1">个
span>
li>
div>
<el-button type="primary" @click="save()">保 存el-button>
<script>
export default {
name: "ecDetailsPopout",
data() {
return {
width: "40%",
input: [],
test1: ["a", "b", "c"],
test2: ["red", "yellow", "blue"],
res1: [],
res: {
a: { red: "8", yellow: "8", blue: "8" },
b: { red: "8", yellow: "8", blue: "8" },
c: { red: "8", yellow: "8", blue: "8" },
},
};
},
methods: {
// clg
save() {
console.log(this.res);
console.log(this.res1);
},
};
script>
1.在input输入框中输入任意值,所有的input全都会显示,如何给每个input 不同的v-model?
解答:input 的 v-model 绑定的是同一个值(res1),当然一处发生变化其他都发生变化
解决方法: 使每一个input都绑定到遍历对象上,对应的值,如楼上
<el-input style="width: 100px" type="text" v-model="res[item1][item2]"></el-input
>
```html
2.提交保存的时候,怎么样才能输出下方res这样的对象集合?
解答: 问题1也已经实现了input 对 res的键值绑定,修改后,直接点击保存,res的值就会 发生改变
3.test1,test2 数组的值,不是固定的3个,也可能是8个 10个!
解答: test1,test2 不是固定,表明res 也不是固定,所有需在 界面渲染之前,根据 test1,test2 首先生成 res的数据结构
```javascript
new Vue({
el: "#app",
data() {
return {
width: "40%",
input: [],
test1: ["a", "b", "c"],
test2: ["red", "yellow", "blue"],
res: null,
};
},
methods: {
save() {
console.log(this.res);
},
},
created() {
let temp = {}
this.test1.forEach(item1 => {
temp[item1] = {}
this.test2.forEach(item2 => {
temp[item1][item2] = ""
});
});
this.res = temp
}
});
那你需要一个数组对象形式
test1:[{val:"a",value:"a"}] 然后 for循环 v-model="item.value"