Question

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

<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

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

在您的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 + '!')
}

Answer 2

您可以从data生成laravel对象，并使用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的名称。使用裁判或依赖vue绑定。

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

2 个答案: