vue,table,v-for循环tr,tr内部v-for循环select下拉框取值问题

第一篇博客就是个vue的问题,汗,,,

使用vue只能是数据:

vue,table,v-for循环tr,tr内部v-for循环select下拉框取值问题_第1张图片

其中的,DVD——租借押金,DVD_时长;总金额,都是data:{里面的数据};

HTML代码如下:

<tbody>
<tr v-for="dvd in dvds">
<td><input type="checkbox" >td>
<td v-text="dvd.id">/td>
<td v-text="dvd.name">td>
<td v-text="dvd.price">td>
<td v-text="ses">td>
<td>
<select v-model="ses" > 由于使用了v-model,这里的select的值代表着最后一个,会互相影响;多个select列表一个变化,别的都会引起一模一样的变化;
<option disabled value="">请选择option>
<option v-for="s in selected" :value="s.money" v-text="s.leasedate">option>




select>
td>
<td v-text="zje = ses + dvd.price">td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >租借button> //里我点击租借的时候,使用的是 zje的数据,导致zje的数值是循环的最后一个的数值
td>
tr>

tbody>

VUE代码如下:

<script>
var vm = new Vue({
el:"#app",
data:{
ses:0,
selected:{},
dvds:[],
// dvd:{},
zje:0 // 总金额
},
methods:{

},
// 实例创建完成之后,初始化内容
created(){
// 查询DVD租借的信息
axios.get("/lease/findAll").then(res => {
this.selected = res.data.rows
}),
// 查询DVD信息
axios.get("/dvd",{
params:{
page:1,
rows:100
}
}).then(res => {
this.dvds = res.data.rows
})
}
})
script>

那么有没有一种比较好的解决方案,自己没有一点思路;请路过的大神进来看一眼

你可能感兴趣的:(vue,table,v-for循环tr,tr内部v-for循环select下拉框取值问题)