vue下一步点击语法

在开发项目的时候，使用的是 Vue 30 ，需要使用 <el-select> 组件实现一个这样的功能：

在第一个选择器选择班级后，第二个选择器默认显示已选班级所有的学生名字列表，如下图所示：

之前是在 Vue 2x 没发现出现这个问题，在 data 中已经设置，如下图所示：

但是在往 nameOptions 中添加数据时，如下所示：

却报错了，如下所示：

如上图所示，发现报错的地方是 const oldVNode = oldChildren[i]; 意思是说，因为 nameOptions 默认的值是 [] ，然后在 oldChildren[i] 这里获取不到下标的值，所以报错了，那如果我们设置 nameOptions 缺省值不为空，就没有这个问题了，如下图所示：

具体原因，待深究。

你在onchange=""中写上alert(thisvalue)试试，就知道了<br>这儿的thisvalue就是当前值 <br>要是想用其它函数，那就是“其它函数(thisvalue)”

实际项目中我们获取选择的数据的id；这时候

需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性

<template>

<div>

<select

v-model="select"

>

<option

v-for="(a,index)

in

arr"

:key="index"

:value="aid">{{

aname

}}</option>

</select>

<p>您选择的名字的Id是：{{select}}</p>

</div>

</template>

js代码

<script>

export

default

{

data(){

return{

select:'',

arr:[

{id:'1',name:'html'},

{id:'2',name:'css'},

{id:'3',name:'js'},

]

}

}

}

</script>

拓展知识：vue获取id以及重定向路由方法

1获取ID的方法：

let

orderId=this$routequeryid;

2路由重定向方法

this$routerpush(this$routequeryredirect

||

'/login')

以上这篇vue *** 作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vuejs获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法

最近遇到一个问题，在循环商品列表时，因为数组的第一个是商品的品牌介绍，所以循环时不能直接循环，只能从第二个元素开始。

方案1：从数据源头更改，后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息，故不好去除。（至于为何品牌信息需要和商品混合在一起，原因是业务问题。以前是给APP上展示的。）

方案2：循环时，列表切割

方案3：利用v-if，因为它的优先级低于v-for

方案4：利用method，返回新数组，其实也是切割和第二种类似

方案5：利用computed

以上就是关于vue下一步点击语法全部的内容，包括:vue下一步点击语法、Vue实现数据增删改查、Uncaught (in promise) TypeError: Cannot read property '0' of null等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！