如何使用V-ON获取HTML属性值的值:在Vue.js中单击内部锚标记

Question

这是带有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>

Answer 1

您可以从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>

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

Answer 2

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

在您的HTML中，将REF添加到您的H5

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

您可以在接收已单击的索引

的招标功能中添加一个参数

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