Как запустить компонент vue внутри блейда, взятого из ajax и помещенного в шаблон vue-router - PullRequest
Новая
       42

Как запустить компонент vue внутри блейда, взятого из ajax и помещенного в шаблон vue-router

0 голосов
/ 08 ноября 2019

Я использую кучу Laravel и vue-router, но не полный, но только частично. Это нужно для создания фильтров ajax по параметрам и динамического изменения блейда url

с фильтром 

    <div class="container">  
      <filters
        :filters="{{$filters->toJson()}}"   
        :selected_filters="{{json_encode($selected_filters)}}"
     ></filters>
   </div>

vue component 

<template>
 <div>
  <div  v-for="item in filters">
    <multiselect
        v-model="filters_selected[item.slug]"
        :options="item.filter_options"
        :multiple="false"
        :allow-empty="true"
        track-by="id"
        label="value"
        :show-labels="false"
        :placeholder="item.name"
        @input="filter_select"

    ></multiselect>

<router-view :data="filter_result"></router-view>

</div>

<script>
 export default {

 props: ['filters', 'selected_filters'],


        data() {
            return {             

                filter_result: '',
                filters_selected: this.selected_filters,
            }
        },

        watch: {

            '$route': 'filter_check_params'
        },

        methods: {
            filter_select() {
                let currentObj = this;

                //prepare link and push in vue-router
                let url = this.makeUrlWithOption (currentObj.filters_selected);               
                currentObj.$router.push(url)
            },

            filter_check_params() {
                let currentObj = this;                    

                axios.get(window.location.pathname)
                    .then(function (response) {                        

                 //Here comes the prepared blade template 
                 currentObj.filter_result = response.data.data_result 

                 })

            },

            makeUrlWithOption(filter_data_select){

              //making url and return

                return url
            }
        }

    }


</script>

контроллер laravel создает вид и возвращает 

        return response()->json( [
            'data_result'       => view( 'front.list' )->with( 'results', $results)->render(),
            'selected_filters'  => $selectedFilters,

        ] );

список блейдов для рендеринга 

 @foreach($results as $result)

                        @if($result->published_at > \Carbon\Carbon::now())

                            <timer
                                starttime="{{ \Carbon\Carbon::now() }}"
                                endtime="{{ $result->published_at }}"
                                trans='{{ json_encode(__('lang.timer')) }}'
                            ></timer>

                        @endif


        @endforeach

Если я выведу этот шаблон не через ajax-timer, он будет работать, если через ajax-timer он отобразится в исходном коде так: 

<timer
 starttime="2019-11-08 13:25:42" 
 endtime="2019-11-16 00:00:00" 
 trans={}
 ></timer>
...