vue子组件下拉框的值动态更新

最新推荐文章于 2023-07-30 15:02:43 发布
最新推荐文章于 2023-07-30 15:02:43 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue项目中常见问题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41904410/article/details/124268573
版权

数据已经修改了，下拉框的值还是空的
监听数据变化，进行强制重新渲染就好了

watch:{
 handler(val){
   this.dataList = deepClone(val)
   this.$forceUpdate()
 },
 deep:true,
 immediate: true
}
森林的尽头是阳光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue之数据更新
Hemx的博客
11-19 6348
Vue的数组更新 数组更新监测 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 在此我有个例子： 这是HTML页面 <ul id="postList"> <li v-for="item in items"> &l...
vue2.0 select子组件实时更新
周家大小姐
04-21 626
在业务需求的时候，select做为子组件，需要接收父组件传递过来的值，在没有选中的时候应该有一个默认的值 父组件： <template> <div> <div class="container"> <BaicInfo :items="items" :purpose="purpose" ...
【代码】Vue完成下拉框的数据更改
weixin_52226593的博客
02-10 2413
<!DOCTYPE html> <html lang="en" xmlns:v-for="http://mybatis.org/schema/mybatis-mapper" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入文件--> <.
vue列表数据删除后的主动刷新页面及刷新方法
qq_43328781的博客
05-09 9539
vue列表数据删除后的主动刷新页面及刷新方法 问题描述： 前端删除一条数据或者新增数据后，后端操作成功，但前端不会自动刷新，需要重新刷新当前页面 （用vue-router重新路由到当前页面，页面是不进行刷新的 ,采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载） 解决： provide / inject 组合 作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 (声明reload方法，控
v-for中遍历多个el-select时，下拉选择框同步选择问题
Macao7_W的博客
06-01 803
vue遍历下拉框 值同步选择问题
vue组件实现可搜索下拉框扩展
08-27
Vue 组件实现可搜索下拉框扩展 本篇文章主要介绍了 Vue 组件实现可搜索下拉框的方法，具有一定的参考价值。下面将详细介绍该组件的实现方法和相关知识点。 组件结构 该组件主要由以下几个部分组成： 1. 搜索模块...
在Vue 中获取下拉框的文本及选项值操作
01-19
-- element表单组件 --> :model=ruleForm label-position right ref=ruleForm u6807记的 status-icon size=small inline :rules rules label-width=150px class> 产品名称 prop=productKind> <!-- <el-...
vue组件实践之可搜索下拉框功能
12-29
之前也写过这个小组件，最近遇到select下加搜索的功能，...子组件 DROPDOWN.VUE <div class=vue-dropdown> <div class=cur-name class=isShow click=isShow>{{itemlist.cur.name}} <div class=search-modu
基于vue实现可搜索下拉框定制组件
08-27
4. 自定义指令：使用 Vue 的自定义指令机制来实现组件的显示和隐藏，以及搜索输入框的值的更新。 组件代码分析 下面是组件的代码实现： 模板部分： ```html <div class="vue-dropdown default-theme" v-show-...
vue + element 下拉框 选项绑定数据列表List，List动态变化后，下拉框下拉后数据不变化问题解决
1234567
01-15 9689
原因很弱智，data中没有初始化，却直接使用，第一次对List赋值时没问题，下拉框能够找到数据，改变List中的值后，下拉框中的值不会跟着List而改变，找了一大圈，发现没有对List在data中进行初始化。 ...
vue下拉框值改变_当下拉框的值改变后另一个下拉框的值跟着变！用JS怎么实现？...
weixin_39617113的博客
12-22 3104
展开全部把下拉框的数据e69da5e887aa62616964757a686964616f31333337613233全部读出，并存放在JS的Array中。当选择下拉框的时候触发onChange()事件动态的添加或改变级联下拉框的内容。varareaArray=newArray();areaArray[areaArray.length]=newArray("1","杭州");areaAr...
vue 下拉刷新数据
sslcsq的博客
04-01 645
借助vant完后下拉刷新出来新数据 这是vant官网的list 列表 https://youzan.github.io/vant/#/zh-CN/list 直接上代码 <template> <div> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <v...
Vue下拉框动态加载数据
风信子
09-17 2313
Vue下拉框动态加载数据 <template> <a-select v-model="model.type" show-search placeholder="请选择下拉框数据" style="width: 100%"> <a-select-option v-for="item in info" v-bind:key="item.id" :value="item.id"> {{item.name }} </a-select-option>
vue中关于修改数据表格数据也随之变化
baozaoderenlei的博客
03-28 1896
一般出现这种问题是因为vue在利用=赋值时，是一种浅拷贝的方式，它是将赋值的数据的引用给了一个新的变量，这也导致了你改变数据页面数据也发生变化的原因。 最简单有效的方式就是进行深拷贝，它会在堆中新开辟一块内存将数据放进去然后把引用给了被赋值的元素. 简单粗暴的深拷贝 this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange)); ...
Vue 列表渲染&数据更新
爱菜鸟高高飞
06-10 404
vue列表选择,
vue响应式数据更新，解决方案
TE杨
11-28 3242
问题： 刚学习vue的人可能会遇到这样一种情况，那就是当我们把属性在data中定义，接口异步请求到数据，并且把值赋值到我们在data中定义的值上，但是dom却没有更新，这时候我们可能就在想，为什么了？是不是vue有问题啊，妈的，vue有毛病吧。 <div id="app"> <h2>{{data.value}}</h2> </div> data: { data: {} }, created() { this.$axios.g
element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
热门推荐
weixin_30469895的博客
08-17 1万+
这个是今天遇到一个坑，因为也是第一次使用vue+element-ui开发，所以记录一下自己遇到的一些问题。 这个问题是在开发省市区三级联动组件的时候遇到的，具体的情况如下发的gif图，虽然解决了问题，但是还是没有懂是为什么这样，有人说是element的bug，不过我觉得不像，可能是用法的问题吧，希望知道原因的博友们可以告知，现在先上下代码； 1.首先address.json的格式是： [ { ...
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
weixin_43937851的博客
08-10 3380
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
Vue2 第七节 Vue监测数据更新原理
最新发布
星星之火的语言c学习
07-30 529
（4）Vue.set() 和 vm.$set() 不能给vm或者vm的根数据对象(vm._data) 添加属性。修改上面新加的性别：可以修改成功，并且是响应式的。（1）Vue会监视data中所有层次的数据。（2）如何监测对象中的数据。（3）如何监测数组中的数据。
vue项目自定义下拉框组件
07-25
你可以通过Vue组件的方式来自定义下拉框组件。下面是一个简单的示例： 1. 首先，在你的Vue项目中创建一个新的组件文件，比如 `CustomSelect.vue`。 2. 在`CustomSelect.vue`中，你可以定义组件的模板、样式和行为。下面是一个基本的示例： ```vue <template> <div class="custom-select"> <div class="selected-option" @click="toggleOptions"> <span>{{ selectedOption }}</span> <i class="fa fa-chevron-down"></i> </div> <ul v-show="showOptions"> <li v-for="option in options" :key="option" @click="selectOption(option)"> {{ option }} </li> </ul> </div> </template> <script> export default { data() { return { showOptions: false, selectedOption: null, options: ['Option 1', 'Option 2', 'Option 3'] // 下拉框选项数组 }; }, methods: { toggleOptions() { this.showOptions = !this.showOptions; }, selectOption(option) { this.selectedOption = option; this.showOptions = false; } } }; </script> <style scoped> .custom-select { position: relative; } .selected-option { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #f0f0f0; cursor: pointer; } ul { position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; max-height: 200px; overflow-y: auto; background-color: #fff; border: 1px solid #ccc; padding: 0; margin: 0; } li { list-style: none; padding: 10px; cursor: pointer; } li:hover { background-color: #f0f0f0; } </style> ``` 3. 在你需要使用自定义下拉框组件的地方，引入 `CustomSelect` 组件，并在模板中使用它： ```vue <template> <div> <custom-select></custom-select> </div> </template> <script> import CustomSelect from '@/components/CustomSelect.vue'; export default { components: { CustomSelect } }; </script> ``` 这样，你就可以在你的Vue项目中使用自定义的下拉框组件了。你可以根据自己的需求进一步扩展和定制该组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值