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

本文涉及的产品
转发路由器TR,750小时连接 100GB跨地域
简介: vue,v-model ,v-for,循环select的取值问题;v-for循环tr,里面再次v-for一个select,取值问题

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

使用vue只能是数据:

6b74ec9172deefb33b353b8a7d3093205d873e42

其中的,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>
<!--<option>7</option>-->
<!--<option>15</option>-->
<!--<option>30</option>-->
<!--<option>永久</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>

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

目录
相关文章
|
2月前
|
JavaScript 前端开发
vue3通过render函数实现一个菜单下拉框
【8月更文挑战第18天】vue3通过render函数实现一个菜单下拉框
109 0
|
22天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
50 5
Vue使用element中table组件实现单选一行
|
21天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
18天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
18天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
2天前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
10 0
|
2月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
Vue3表格(Table)
|
2月前
|
JavaScript 前端开发 安全
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
这篇文章详细介绍了Vue中常见的内置指令,如v-bind、v-model、v-for、v-on、v-if、v-else、v-show、v-text和v-html等,并通过代码示例演示了它们的使用和效果。
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
|
2月前
|
JavaScript
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
这篇博客文章详细介绍了Vue中列表渲染的基础知识、`v-for`指令的使用、`key`的原理和列表过滤的实现。通过代码实例和测试效果,展示了如何遍历数组和对象、使用`key`属性优化渲染性能,以及如何实现列表的动态过滤功能。
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
|
2月前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
31 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格