如何使用 v-on 获取 html 属性值的值：单击 Vue.js 中的锚标记内？答案

【问题标题】：How to get value of html attribute value with v-on:click inside anchor tag in Vue.js?如何使用 v-on 获取 html 属性值的值：单击 Vue.js 中的锚标记内？
【发布时间】：2019-08-10 09:47:58
【问题描述】：

这里是 vue.js 和 laravel 的代码...... 我想要在我的 vue 应用程序中为 {{$subcategory->name}} 的 'h5' 属性值，所以我可以执行其他目的。

<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">
                                @foreach($data['subcategories'] as $count => $subcategory)
                                    <li role="presentation" @if($count == 0) class="active" @endif>
                                        <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>
                                @endforeach 
                            </ul>
                            <div class="tab-content">
                                @foreach($data['subcategories'] as $count => $subcategory)
                                    <div role="tabpanel" @if($count == 0) class="tab-pane active" @else class="tab-pane" @endif 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>
                                @endforeach 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                new Vue({
                    el: '#showProd',
                    data: {
                        name: 'Vue.js'
                    },
                    methods: {
                        greet: function (event) {
                        // `this` inside methods point to the Vue instance
                        var val = this.
                        alert('Hello ' + this.name + '!')
                        }
                    }
                });
            </script>

【问题讨论】：

标签： laravel vue.js bootstrap-4

【解决方案1】：

有几种解决方案，这是一个：

在您的 html 中添加 ref 到您的 h5

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

你可以在 greet 函数中添加一个参数来接收被点击的索引

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

【讨论】：

【解决方案2】：

您可以从laravel 生成data 对象，并使用vuejs 绑定和构造来生成html。这意味着您不会依赖刀片模板来生成 html，而是依赖 vuejs。

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

现在您需要更新您的模板以使用来自数据的信息，而不是通过刀片直接来自 php。

<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>

另外，不要依赖 vue 中的 id。使用 refs 或依赖 vue 绑定。

【讨论】：