How to get the values of data-* attributes in vuejs

vue get data attribute on click
vue js get attribute value
vue dynamic attribute name
vue data- attributes
vuejs get data attribute
vue render function data attribute
vue get value of input by ref
get data attribute javascript

I have a button which when clicked opens up a modal, and the content to show in the modal is based on the data-attributes passed to the button.

My button,

<button class="btn btn-info" data-toggle="modal"
        data-target="#someModal" :data-id=item.id :data-name=item.name>
        Edit
    </button>

In my modal, I have some buttons and when clicked I should call a vuejs function with a parameter, which is the data-attribute.

My modal button,

<div class="modal-footer">
    <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem()" data-dismiss="modal">
        Delete
    </button>
    <button type="button" class="btn btn-warning" data-dismiss="modal">
        <span class='glyphicon glyphicon-remove'></span> Close
    </button>
</div>

Here I have to pass a parameter to deleteItem(), and that parameter is the data-id which I get from the button above.

Code for Modal

    <div id="deleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Delete</h4>
                </div>
                <div class="modal-body">
                    <div class="deleteContent">
                        Are you Sure you want to delete ?
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn actionBtn btn-danger"
                            @click.prevent="deleteItem()"
                            data-dismiss="modal">
                            Delete <span id="footer_action_button"
                                class='glyphicon glyphicon-trash'> </span>
                        </button>
                        <button type="button" class="btn btn-warning"
                            data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

I recommend doing a console.log(this) inside a component function, then calling that function on a button click so you can inspect all the properties of the component.

(See the attached image, below, for example output of the above console.log statement.)

This shows you that amongst others, you have access to the $el property holding the DOM element. Which opens up a whole lot of possibilities, such as being able to add the following code to the mounted lifecycle hook of your component:

mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

And for this example, this.myAttribute would have been defined in (for example) your data property:

// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

Vue.js (v2) Lifecycle hooks documentation


Example output when executing console.log(this) inside a component:

How to get the values of data-* attributes in vuejs, Im in the middle of adding VUE to my project and I have a button which contains a data-attribute called “data-url-desc”. I want to set a data value  Today, i would like to show you get custom attribute value vuejs. if you have question about vue js click event get attribute vue value then i will give simple example with solution. This tutorial will give you simple example of vue js get attribute value.

You can pass the "item.id" like this too:

<button type="button" @click="deleteItem(item.id)">Delete</button>

Getting a data attribute value - Get Help, If you need to get attribute value on click event in Vue.js then I can help you to getting data attribute value in Vue.js. We will write button click event and get  Authors must not use elements, attributes, or attribute values that are not permitted by this specification This means that documents using the v-model attribute are non-conforming. Also of note (2.2.1):

A simple option will be bind the id to the delete button as well

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)"  :data-id=item.id data-dismiss="modal">
        Delete
    </button>

How to get data attribute value in Vue.js?, In this lesson, we'll explore ways you can connect data to the attributes of your We want to be able to update that image in our data and have the image To bind the value of image in our data object to the src in our img tag, we'll use Vue's​  The first clickme shows the href as hreflink, and the second one shows it in {{hreflink}}, while the last one displays the correct url as we require. Hence, to assign values to HTML attributes, we need to bind it with the directive v-bind as follows. VueJS also provides a shorthand for v-bind as follows.

HTML
<button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>
Vue
methods:{
  deleteItem: function(){
    var id = event.target.getAttribute('data-id');
    console.log(id) // 1
  }
}
Here is the demo https://codepen.io/maab16/pen/jONZpVG

Attribute Binding, I use data attributes sometimes and it would be really helpful to have a I'd love to get access to RDFa attributes (as well as data-* and friends). in the JS, but inside the value of a directive attribute (such as v-if ) it's not  key is a special attribute in Vue. You will have to call your property something else. You will have to call your property something else. Here is an alternative using pkey instead.

Directive to parse data attributes · Issue #27 · vuejs/Discussion , Hi, is there a good reason why you don't go with the data-* attributes and invent your In addition, search crawlers do not index data attributes' values. It casue an error when I use use Vue.config({ prefix: 'data'}) to overwrite v-* (Vue 1.0.16  Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute: Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url.

Why not using HTML5 data-* attributes · Issue #273 · vuejs/vue , This access is available both in HTML and within the DOM. It is a map of The name of a custom data attribute in HTML begins with data- . It must contain only When an attribute is set, it's value is always converted into a string. For example null is See also. The HTML data-* class of global attributes. I want to get the text of a selected option input and display it somewhere else. I know how to do it using jQuery but I want to know how can we do it using Vuejs. Here is how we do in jQuery. I mean the text of Selected Option not the value. ''' var mytext = $("#customerName option:selected").text(); ''' Here is my HTML '''

HTMLOrForeignElement.dataset, Using HTML5 data-* attributes with Vue 2.0. Posted 3 years How you guys store objects in data attributes and later access it? Report Spam. The value of vm.reversedMessage is always dependent on the value of vm.message. You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.reversedMessage depends on vm.message , so it will update any bindings that depend on vm.reversedMessage when vm.message changes.

Comments
  • Can you post the code for the modal you're using?
  • Posted the code for modal, I need to pass a parameter to the function in modal footer button.
  • When you pass props as kebab case for the component, Vue js changes them to camel case, so data-id is available as this.dataId in your component
  • It is possible to use this.$el.getAttribute('data-*') function in beforeMount hook. In such case you can specify null for properties instead of default values in data function.
  • For any 1.x users, compiled looks like the earliest lifecycle hook with this.$el populated such that you can use it like this.
  • When add this, i get the following error [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
  • make sure the scope extends the button as well
  • Yea the button is in the scope itself.
  • can you create a jsfiddle?