vue里面head组件切换下拉框,当前页面刷新数据

我做了一个head的组件,上面有个下拉框,放在了当前的vue文件上,当我切换下拉框的时候,刷新当前页数据,如果不用vuex做的话,该怎么做?请各位大神解答~~

4个回答

你的需求目的就是要保证实时页面数据的实时响应,只要切换下拉框的数据能触发更新当前页的数据都能满足你的需求

当然首选是vuex,如果不想用这种机制的话,可以使用子传父的方式,利用让子组件订阅父组件的更新方法,这样就可以达到你的目的。希望我已准确理解你的需求意图!

qq_16026045
军魂L 感谢,对,就是你这意思,不过我已经解决了~
一年多之前 回复
qq_16026045
军魂L 感谢您的回答~
一年多之前 回复

首先,下拉框的父体(div或者button等等)设置position:relative;下拉框设置position:absolute;top和left自己设置。然后,父体添加点击事件,绑定某函数,比如@click="show",在该函数控制一个参数进行变化,比如this.isShow = !this.isShow,下拉框用v-show='isShow'来控制下拉框的显示与否。在此基本实现了下拉框,下拉框中每一项添加事件,并绑定函数,在函数中调用网络请求来刷新页面数据,望采纳

qq_16026045
军魂L 我已经解决了,感谢您的回答~
一年多之前 回复
ashallot
ashallot 回复qq_16026045: 那你想问什么意思233
一年多之前 回复
qq_16026045
军魂L 不是我想问的~
一年多之前 回复

自己解决了,感谢各位!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue刷新和tab切换
首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的。) 然后再要刷新的页面引用                                   价格  //点击价格会排序
vue项目如何刷新当前页面
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上这时候我们最直接的思维就是想到下...
Vuejs刷新页面子组件数据丢失问题的一点笔记
最近在学习Vuejs, 在路由中给子组件传递数据后,刷新页面出现数据丢失问题。// 子组件代码 props: { // 用于接收父组件的数据goodsData goodsData: { type: Array, required: true } }, computed: { ... item () {
页面刷新和vue页面刷新
1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(location)8 document.URL=location.href这几个都...
vue 刷新当前路由
1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。 2.刷新路由 对于路由,不同的路由跳转,vue会帮我们刷新
vue单页应用如何在页面刷新时保留状态数据
在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你一、问题现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致。这时候就需要我们保存刷新之前页面的状态。二、一种解决方案在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王...
vue-router相同的地址,如何刷新数据
vue-router当跳转是相同的地址时,是不会刷新页面的 刷新页面的方法有: 1、location.reload() 2、去掉 mode: ‘history’, 3、把router-link换成a标签 跳转个人建议,采用第三种,使用a标签
vue+i18n 切换语言后无法刷新数据 的 解决方案
使用国际化vue-i18n 时, 在页面更新国际语言后 想刷新页面数据, vue刷新不起作用, 改变思路,直接改变使用了国际化的那些数据,重新使用this.$t()方法读取即可...
vue导航栏刷新,选中样式不修改(选中状态刷新不消失)
<router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path,query:{item:index}}" :class="{'router-link-exact-active':ind == index}" @click.native="changeBgc(index)
页面刷新vuex数据消失问题解决方案
转自:http://www.cnblogs.com/cloud-/p/7103054.html VBox持续进行中,哀家苦啊,有没有谁给个star。 vuex是vue用于数据存储的,和redux充当同样的角色。 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。 网上搜,大家的方案都是把数据转移到 localStorage或者
jsp页面中下拉框列表刷新值不变
String sele =request.getParameter("sele")==null?"":request.getParameter("sele"); session.setAttribute("option", sele); String gg=(String)session.getAttribute("option")==null?"":(String)session.g
vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新
代码: 首页  export default {   ...   ...   methods:{     flushCom:function(){       //router是路由实例,例如:var router = new Router({})       //router.go(n)是路由的一个方法,意思是在history记录中前进或者后退多少步,
Vue2.5.x --- 点击路由跳转后刷新页面仍然停留在之前的路由页面解决方法
处理前的情况,页面刷新也会停留在之前跳转的路由页面: 处理后的情况,页面刷新后页面会跳转至默认页面(默认页面为热映): 本文使用的是mint ui框架需要下载并引用才能与博文中样式一致 代码部分: &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;router-view/&amp;amp;gt; &amp;amp;l
页面刷新后子组件不更新
父组件中调用子组件deviceBasicInfo:&amp;lt;deviceBasicInfo :device='deviceInfo'&amp;gt;&amp;lt;/deviceBasicInfo&amp;gt;export default{        components:{ deviceBasicInfo:resolve =&amp;gt; {require(['@/components/device/...
当前vue路由组件重新加载
利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 &amp;lt;template&amp;gt; &amp;lt;router-view v-if=&quot;isRouterAlive&quot;/&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; export default { data () { return { isRouterAlive: tr...
vue 下拉选择框
如果下拉选择项是从服务器动态获取的,先定义一个空的对象,用变量接住,给对象建立自定义的属性或方法,再将动态获取的数据的对应项,依次放在对应的属性中。样式是element ui 中的select 选择器,具体功能如下: data(){ return { opsition:[] } } created(){ this.classifyOption(); } method:{
vue表单绑定:多选框和下拉列表
在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现:<label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss.indexO
vuejs中select下拉框值的获取
代码片段 {{myVal}} &amp;lt;select v-model=&quot;myVal&quot;&amp;gt; &amp;lt;option v-for=&quot;item in options&quot; :value=&quot;item.value&quot;&amp;gt; {{item.name}} &amp;lt;/option&amp;gt; &amp;lt;/select&amp;gt; data(){ return{
vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
1、使用Vue完成项目,从后台获取数据绑定到页面时,无法确保页面能在组件渲染前获取到所需的数据;     在下面两种情况中遇到过这个问题:     1)、子组件页面需要绑定后台数据到视图层:             解决方法:在父页面提前进行数据获取,用Vuex保存,然后子页面computed属性中返回该参数,即可保证渲染不出错;             PS:之前尝试过在子页面mount
使用vue动态组件达到切换效果
html代码: js代码: 效果: js代码: 效果:
vue简单下拉框组件
因为要将选择的数据传回父组件,所以要传一个对象过去。<template> <!--下拉单选框--> <div class="base-select" @click="showDataList" v-bind:style="{width: widthData}"> <div class="sub-selected-value"> {{selectedValue.va
[IMWeb训练营作业]vue实现自定义select下拉框组件
运行效果图: HTML: 自定义的下拉框 第二个下拉框 JS: Vue.component( "custom-select",{ //可小驼峰可烤串 data:function(){ //data为fu
Vue.js组件封装——下拉列表
html>   head>   meta charset="utf-8">   meta http-equiv="X-UA-Compatible" content="IE=edge">   title>封装组件-下拉菜单title>   style>   *{margin: 0;paddin
vue-router路由切换 组件重用挖下的坑
问题描述:vue-router导航切换 时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 ************************************************************************************************************
vue 通过下拉框组件了解Vue中父子组件通讯
最近很忙,一直没有时间写文章,接下来的时间,主要通过写一些vue组件的小例子,然后认识到vue中的一些知识,让大家都学会vue框架的使用
关于页面刷新的问题
在做.net开发时,经常能碰到这样的情况,页面很长,而我们一般用的都是服务器端控件,用服务器端控件有这样一个缺点,就是控件每次都要和服务器交互,而产生页面的刷新,试想一下,如果页面很长,而页面中的控件又很多,每次都要刷新到页面顶部,那我们在填写资料时页面每刷新一次我们都要拖动一次滚动条,这样实在是很麻烦,问题由此产生,一些人用SmartNavigation 方法,这个方法可行,但它一般会与页面中的
Vue 路由切换时页面内容没有重新加载
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新。问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了&amp;lt;keep-alive&amp;gt;:&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;keep-alive&amp;gt; &amp;lt;router-view&amp;gt;&amp;lt;/..
vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。以及使用过程中要注意的问题
vue组件实践-可搜索下拉框扩展
一、效果 二、代码 dropdown-ext.vue &amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;vue-dropdown-ext&amp;amp;amp;amp;amp;quot; :class=&amp;amp;amp;amp;amp;quot;themestyle&am
vue.js select下拉框绑定和取值
最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 {{send.CODE}} 2.取值就直接获取下拉框,v-model绑定的属
weex 中使用vue语法使用,自定义navbar组件和navpage组件
1、自定义组件,需要父组件传值得属性放在props里面 :style 可以写多个属性用逗号(,)分割,或者直接:background-color=”backgroundColor”<template> <div class="container" :style="{height:height+'px', backgroundColor:backgroundColor}" :data-ro
Vue做类tab页切换
<div class="import-case-type-select import-case-type-select-active" id="csvTypeId"> <a class="text-white" v-on:click="selectCaseType('csv','#csvTypeId')"> <div class="font-logo"></div>
vue组件学习5(tab切换)
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;js/vue-1.0.24.debug.js&quot;
vue页面刷新或者后退参数丢失的问题
在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好。 我的解决有两种: 第一种方法:用vue 的,即在外套一层。 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓
vue组件实践-可搜索下拉框
实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录。在本文中没有对组件添加样式。 一、效果 二、组件代码 dropdown.vue &amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;vue-dropdown&amp;amp;amp;amp;quot;&amp;amp;
【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
在引用组件中使this重新指向当前组件 关于vue组件的其他通信方式&amp;lt;父子组件通信、兄弟组件通信(Bus方式、Vuex方式)&amp;gt;请看我另一篇文章 VueAwesomeSwiper轮播图组件存在同样问题 在兄弟组件中采用Bus方式进行通信时: created() { Bus.$on(&quot;fromOther&quot;, function(data) { this.cur...
Vuejs关闭打开的窗口后刷新父页面
解决办法:可在添加成功之后添加代码  “parent.location.reload();”
Vue中Element中Select下拉框选取值问题
之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html 周次    开始日期   截止日期  {{ item.mateGroup }}  
vue实现倒计时的插件 时间戳 刷新 跳转 都不影响
https://www.cnblogs.com/sichaoyun/p/6645042.html     工作当中需要开发一个倒计时插件,于是开始网上先拿来主义,发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个插件,测试已经通过,直接上代码 如下是组件代码:   &amp;lt;template&amp;gt; &amp;lt;span :endTime=&quot;endTim...
vue导航栏(选中状态刷新不消失)
Vue导航栏         用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写。(全部代码黏贴到本文的最后面了) 1、首先把这些小图片放到src/assets路径下面(
相关热词 用户权限才c# c#应用程序实例 c#请求接口数据 c#高效读写plc c#代码规范快捷方式 c#编辑模板 c# 内存存储 c# poi 生成图表 c#页面 弹出页面选择框 c# 不实现 继承接口