精华内容
下载资源
问答
  • 如何在Vue中获取自定义属性方法:data-id

    万次阅读 热门讨论 2019-05-16 22:36:44
    获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面 第二步:在标签上继续绑定:date-id = "item.id"属性 第三步:在<script>里面的属性methods...
    获取自定义属性的方法:
    第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面
    第二步:在标签上继续绑定:date-id = "item.id"属性
    第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可
    <template>
    <h2 class="left t-title" @click='getDataId(item.id)' :data-id="item.id"></h2>
    </template>
    <script>
    export default {
      name: 'index',
      components: { },
      data () {
        return {
          dialogVisible: false,
        }
      },
        methods: {
            getDataId(id) {
                console.log(id);
            }
          },
    }
      
    </script>
    
    展开全文
  • vue中如何获取token,并将token写进header

    万次阅读 多人点赞 2018-03-15 16:12:25
    在login.vue中通过发送http请求获取token//根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pa...
    需要准备的东西:Vue+axios+Vuex+Vue-router
     
    1.在login.vue中通过发送http请求获取token

     

     
    //根据api接口获取token
    var url = this.HOST + "/session";
    this.$axios.post(url, {
      username: this.loginForm.username,
      password: this.loginForm.pass
    }).then(res => {
      // console.log(res.data);
      this.$message.success('登录成功');
      let data = res.data;
      //根据store中set_token方法将token保存至localStorage/sessionStorage中,data["Authentication- 
      //Token"],获取token的value值
      this.$store.commit('set_token', data["Authentication-Token"]);
    
    if (this.$store.state.token) {
      this.$router.push('/')
    } else {
      this.$router.replace('/login');
    }
    
    }).catch(error => {
      // this.$message.error(error.status)
      this.loading = false
      this.loginBtn = "登录"
      this.$message.error('账号或密码错误');
      // console.log(error)
    })
    

     
     
    2.在store.js中对token状态进行监管
     
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state:{
        token:''
      },
      mutations:{
        set_token(state, token) {
            state.token = token
            sessionStorage.token = token
        },
        del_token(state) {
            state.token = ''
            sessionStorage.removeItem('token')
        }
       }
    })
    
     
    3.在router/index.js中
    import Vue from 'vue'
    import Router from 'vue-router'
    import store from './store'
    
    // 页面刷新时,重新赋值token
    if (sessionStorage.getItem('token')) {
        store.commit('set_token', sessionStorage.getItem('token'))
    }
    
    const router = new Router({
        mode: "history",
        routes
    });
    
    router.beforeEach((to, from, next) => {
      if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的                         
        meta:{requireAuth:true},// 意思为:该路由添加该字段,表示进入该路由需要登陆的
        if (store.state.token) {
            next();
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}
            })
        }
      } else {
        next();
      }
    })
    

     
     
     
     
     
    4.在main.js中定义全局默认配置:

     

    Axios.defaults.headers.common['Authentication-Token'] = store.state.token;
     
    5.在src/main.js添加拦截器,(先引入store.js)
     
    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import store from './store'
    import App from './App'
    import router from './router'
    import Axios from 'axios'
    
    // 添加请求拦截器
    Axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      //判断是否存在token,如果存在将每个页面header都添加token
      if(store.state.token){
        config.headers.common['Authentication-Token']=store.state.token
      }
    
      return config;
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // http response 拦截器
    Axios.interceptors.response.use(
    response => {
    
      return response;
    },
    error => {
    
    if (error.response) {
      switch (error.response.status) {
        case 401:
        this.$store.commit('del_token');
        router.replace({
          path: '/login',
          query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
        })
        break
      }
    }
    return Promise.reject(error.response.data)
    });
    ------------------------------------------------------------------------------------
    ...................完成以上步骤就可以了..........................
    ------------------------------------------------------------------------------------

     

    展开全文
  • vue method 方法中获取dom元素

    千次阅读 2017-12-27 13:29:50
    vue method 方法中获取dom元素 参考博客: http://blog.csdn.net/xiaogezl/article/details/70809155  http://www.cnblogs.com/Eden-cola/p/vue-register-dom.html   我的应用: 应用场景:页面上显示一个...

    vue method 方法中获取dom元素   

    参考博客:

    http://blog.csdn.net/xiaogezl/article/details/70809155 

    http://www.cnblogs.com/Eden-cola/p/vue-register-dom.html  

    我的应用:

    应用场景:页面上显示一个穿梭框,穿梭框中内容可拖拽,需求:获取当前拖拽的对象,对其操作



    展开全文
  • vue中获取当前页面URL参数id

    千次阅读 2020-12-08 08:03:28
    vue中获取当前页面URL参数id 第一步:首先我们在utils文件夹下创建一个getUrlParams.js文件,在里面写入代码如下: // 获取参数 export function GetUrlParam(name) { var url = window.location.href; let ...

    vue中获取当前页面URL中参数id

    第一步:首先我们在utils文件夹下创建一个getUrlParams.js文件,在里面写入代码如下:

    // 获取参数
    export function GetUrlParam(name) {
      var url = window.location.href;
    
      let params = url.substr(url.lastIndexOf("?") + 1).split("&");
      for (let i = 0; i < params.length; i++) {
        let param = params[i];
        let key = param.split("=")[0];
        let value = param.split("=")[1];
        if (key === name) {
          return value;
        }
      }
    }
    

    第二步:在需要用到该方法的页面引入getUrlParams.js,最后,我们只要输入想要获取的参数名,就可以在页面中获取url上对应的id参数值咯!:

    import { GetUrlParam } from "@/utils/GetUrlParam.js";
    
    beforeMount() {
            this.isShare = GetUrlParam("share");
            console.log("我的share", this.isShare)
    	}
    
    展开全文
  • vue 列表页跳转详情页获取id方法以及详情页通过id获取数据 2018年12月17日 20:19:00 荔枝吖 阅读数:1644 1.先在router.js配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:...
  • vue基础:获取表单数据,双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 1.在vue中我们通过v-model进行数据绑定,vue其实就是实现mvvm的框架,mvvm表示,model的改变会影响view(视图),view的改变会影响...
  • Vue中自动获取input焦点

    万次阅读 热门讨论 2018-09-03 11:24:36
    ()" class="search-inp" placeholder="搜线路"> ... 但是我发现,这些方法都没解决第一次进入页面,input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法
  • vue中动态获取dom元素进行操作

    千次阅读 2020-02-18 17:35:46
    这几天我远程面试了一家...我说大体上俩吧 1.vue中ref的方法给元素起一个ref名称通过 this.$refs.ref名称获取 2.第二个无非是原生dom操作了 document.getElement // document.querySelector等等 人家说如果是从...
  • Vue获取url的id

    千次阅读 2020-04-13 11:37:38
    可以通过this.$route.query.id 查询获取 在path定义了id的 { path: ‘/detail/:id/’, name: ‘detail’, component: detail, meta: { title: ‘详情’ } } 1、参数名需要保持一致 2、如果路...
  • vue 添加项id自动获取id

    千次阅读 2019-06-10 11:09:00
    (function (window) { 'use strict'; const vm = new Vue ({ el:'#app', data:{ name:'', list:[ {id:1,name:'抽烟',completed:false}, ...
  • vue官方不建议我们直接操作dom.但真到项目实战.有时候还是需要一些操作dom的功能.目前我在vue项目最常用两种... 第二种: 使用vue提供的实例属性$refs获取到dom.  先说下第一种:   封装函数如下: Vue....
  • Vue父组件获取子组件的变量

    万次阅读 2019-03-21 09:35:04
    vue项目日常开发,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,...注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用。 介绍:这里通过给...
  • vue 列表页跳转详情页获取id方法

    万次阅读 2018-09-14 10:35:44
    path: 'orderDetails/:id', name: 'orderDetails', component: orderDetails, }, 列表 openDetails(row){ //查看详情 this.$router.push({path:'orderDetails/'+row.number}) }, 详情页 ...
  • "del(m.id)" > 删除 < / button > < / td > < / tr > < / table > < / div > < / template > < script > export default { data ( ) { return { message : [ ] } } , methods...
  • vue中如何获取后台数据

    千次阅读 2018-01-02 19:44:00
    原文链接:... 需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数加入 import VueResource from 'vue-resource' Vue.use(VueRe...
  • vue中使用下拉菜单,在下拉菜单遍历作者,然后想要再获取作者的id无从下手。 <div> <select name="" id=""> <option v-for="item in user_list">{{item.name}}</option> </select...
  • Vue中跨域以及sessionId不一致问题解决方法

    万次阅读 多人点赞 2018-10-23 16:05:49
    首先需要请求获取验证码的接口,然后将验证码存入session并返回给前端,登录时拿用户输入的验证码和session保存的验证码比较,这时会发现session中获取不到之前存入的验证码,这是sessionId改变导致的。...
  • vue 使用 AJAX获取数据的方法

    万次阅读 2017-08-18 14:43:35
    VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。 看下例: new Vue({ el:'#app', data:{data:""}, created:function(){ var url=
  • vue操作select获取option的ID

    千次阅读 2019-05-05 20:42:03
    ($event)" > 商品名称</option> (item,index) in productList" :key="index" :value='item.id'>{{item.title}}</option> </select> ... //获取商品ID,即option对应的ID值 }, } }
  • Vue 从文件中获取文本信息

    千次阅读 2019-03-13 09:41:28
    最近在使用vue做项目的时候,遇到一个需求,界面需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上。 刚开始我使用的是File和...
  • JSON数组和JSON对象在vue中获取

    万次阅读 多人点赞 2018-05-11 15:46:16
    这两天在学习vue,主要是为了实现前后端的分离,...在这个截图(截了好几次才完美截下),红框部分是从API获取数据,中间的语法等我们也在以后再讨论。 我发现照着这个模板来做的话,可以正常获取到数据,然而...
  • VUE获取DOM节点的方法

    千次阅读 2020-08-29 14:39:48
    vue项目获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。 <template> <div class="contaier" ref="box" style="width: 100px;height:...
  • vue使用vue-router获取链接传入参数

    千次阅读 2017-12-14 21:58:22
    vue使用vue-router管理路由,跳转时传递参数
  • Vue中使用getUrlParam()方法获取URL的值 首先建一个GetUrlParam.js,然后在需要的页面引入使用: GetUrlParam.js export function getUrlParam(name) { return decodeURIComponent((new RegExp('[?|&]' + ...
  • vue获取id以及重定向路由

    千次阅读 2018-03-19 09:24:44
    1.获取ID方法: let orderId=this.$route.query.id; 2.路由重定向方法this.$router.push(this.$route.query.redirect || '/login') 
  • vue中如何获取到input的值

    千次阅读 2019-09-21 15:01:30
    HTML: <input type="number" ref="abc"> JS: var id=this.$refs.abc.value; 或者使用v-model HTML: <input :type="inputType2" v-model="password" class="PwdInput" ...
  • id绑定 :id="‘a_’+index" 输出的id为a_0,a_1。。。。。 <div v-for="(item,index) in list" :key="index" > ...div :id="'a'+index" @click="b(index)">...然后在vue的实例就可以拿到对应的id b(...
  • 父组件获取子组件的数据与方法 1.调用子组件的时候,通过设置ref <Child ref="child"></Child> 2.在父组件通过 this.$refs.child.属性 //this.$refs 获取子组件的内容 this.$refs.child.方法 父...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 301,676
精华内容 120,670
关键字:

vue方法中如何获取id

vue 订阅