Блог

Вот код с vue.js , laravel……. Мне нужно ‘ h5' значение атрибута, которое есть {{$subcategory->name}} в моем приложении vue, чтобы я мог выполнять другие цели.

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

Вы можете сгенерировать data объект из laravel и использовать привязку vuejs и конструкции для генерации html. Это означает, что вы будете полагаться не на шаблоны блейда для генерации html , а на vuejs.

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

Теперь вам нужно обновить свой шаблон, чтобы использовать информацию из data, а не напрямую из php через 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>
  

Кроме того, не полагайтесь на идентификаторы в vue. Используйте ссылки или полагайтесь на привязку к vue.

Для этого есть несколько решений, это одно:

В вашем html добавьте ссылку на ваш 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   '!')
}