[Vuejs]-How to get value of html attribute value with v-on:click inside anchor tag in Vue.js?

by

0👍

There are several solutions to this, this is one:

In your html add a ref to your h5

<h5 class="card-title" id = "product_name" ref="product_name_{{$count" >{{$subcategory->name}}</h5>

You could add a parameter to the greet function that will receive the index that has been clicked

greet: function (pIndex) { // 
    // `this` inside methods point to the Vue instance
    console.log(this.$refs['product_name_'pIndex].textContent) // Here 
    alert('Hello ' + this.name + '!')
}

0👍

You can generate the data object from laravel and use vuejs binding and constructs to generate the html. This means that you won’t rely on blade templating for generating the html, but on vuejs.

data () {
  return JSON.parse( '{{json_decode($data['subcategories'])}}' )
}

Now you need to update your template to use the info from data and not directly from php via blade.

<div class="container" id = "showProd">
 <div class = "row"> 
    <div class = "row" align = "center" id = "flash">
        <div class="tabpanel">
            <ul class="nav nav-tabs" role="tablist">

                    <li v-for="(subcategory, subindex) in subcategories" role="presentation" :class="{'active': subindex === 0}">
                        <a :href="'#tab-' + subcategory.id" :aria-controls="'#tab-'+ subcategory.id" role="tab" data-toggle="tab" v-on:click = "greet">
                            <div class="card" id = "category_list" style="width: 17rem;"><img id = "product_image" class="card-img-top" src="/images/0a09d8530691a1c23a4e4f4ec3eeff2a.jpg" alt="Card image cap" style="height:170px;">
                                <div class="card-body" >
                                    <h5 class="card-title" id = "product_name" >{{subcategory.name}}</h5>
                                </div>
                            </div>
                        </a>
                    </li>

            </ul>
            <div class="tab-content">

                    <div v-for="(subcategory, subindex) in subcategories" role="tabpanel" :class="{'tab-pane': subindex === 0, 'active': subindex === 0}" @else class="tab-pane" :id="'tab-'+subcategory.id">
                        <h2>{{ subcategory.name }}</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias enim obcaecati praesentium repellat. Est explicabo facilis fuga illum iusto, obcaecati saepe voluptates! Dolores eaque porro quaerat sunt totam ut, voluptas.</p>
                    </div>

            </div>
        </div>
    </div>
 </div>
</div>

Also, don’t rely on id’s in vue. Use refs or rely on vue binding.

Leave a comment