SoFunction
Updated on 2025-04-11

Get the instance of custom attribute method: data-id in Vue

How to get custom properties:

Step 1: First bind @click="getDateId()" on the tag, and pass the attribute value to the bound event

Step 2: Continue to bind on the tag: date-id = "" attribute

Step 3: Add the event function getDateId(id){} in the attribute methods in <script> and get the value of id in the event function.

<template>
<h2 class="left t-title" @click='getDataId()' :data-id=""></h2>
</template>
<script>
  methods: {
    getDataId(id) {
      (id);
    }
   },
</script>

Supplementary knowledge:vue local storage, get custom data-id, get link url parameters, page jump back, modify page title

1. Local storage:

('uqid','REgaI2eAT9yDfpdc'); //Storage locally (transmit dead argument)

var uqid = ('uqid'); // Get the local value stored

or

var orderSn = 20;
('orderSn',orderSn);
var uqid = ('orderSn');

2. Get custom----------data-id

bindList(e){
 var autoId = $().attr('data-id');    //Get div -data},

3. Get link---url parameters

http://localhost:8080/#/lineitem?uqid =2019032817530157997 (get ---uqid )bindList(){
 var uqid = ('uqid');
 alert(uqid );
},

The above-mentioned url parameters need to be obtained to introduce js file----

/* eslint-disable */
export default{
  getUrlKey: function (name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec() || [, ""])[1].replace(/\+/g, '%20')) || null
  }
}

Global introduction

import utils from './assets/js/' //get url parameters

= utils;

4. Page jump back

 @click="bindReturn"
methods:{
 bindReturn(){
 this.$(-1);             //Return to the previous page, },  
 bindOrider(){  
 this.$({path: '/doctorlist'});   //Page jump },
}

router/file

import doctorList from '@/components/doctorlist'
export default new Router({
 routes: [
 { 
    path:'/doctorlist',
    name:'doctorList ',
    component:doctorList ,
    meta: {
     title: 'I'm the modified page title'
    }
   },
 ]
})

Modify the page and add it

// Modify the page title((to, from, next) =&gt; {
 /* Change the route page title */
 if () {
   = ;
 }
 next();
})

The above article is the example of obtaining custom attributes in Vue: data-id. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.