在刀片模板中使用VueJS事件

时间:2017-09-21 12:07:33

标签: javascript events laravel-5 vue.js laravel-blade

我有一个ajax视图,它被附加到我的vue容器中,我试图找出是否可以在我的刀片模板中添加一些vue事件并让vue听取事件

例如在刀片

<td v-on:click="methodToCall(tdData)"></td>

并在vue

  methods: {

         methodToCall(data) {

     }
 }

洞情景

我有一个ajax视图,它被附加到我的vue容器中,我试图找出是否可以在我的刀片模板中添加一些vue事件并让vue听取事件

例如在刀片

<td v-on:click="methodToCall(tdData)"></td>

并在vue

  methods: {

         methodToCall(data) {

     }
 }

洞穴情景

<template>
    <div>
        <div id="stats"></div>
        <span class="loading"></span>
    </div>
</template>


<script>

    export default {

        props: ['user'],

        created() {            
           this.fetchData(this.user);            
        },

        methods: {

            fetchData(user) {
                axios.get('/api/v1/user/' + user, {
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                }).then(response => {
                    this.data = response.data.view;
                    $('#stats').append(this.data);
                    $('#supplyUser').select2();

                }).catch(error => {

                });
            },
            methodForBladeAction() {} 

        },



        data() {
            return {
                allProjects: {},
                year: null,
                data: {},
                listing: []
            }
        }
    }

</script>

我的刀片的一部分是由函数生成的

 $td .= '<td title="'. $employeeList .'" '
                    . 'class=" leer'. $isSupplied . $offDay .'"'
                    . 'v-on:click="method()"'
                    . 'data-user     = "'. $employee .'" '
                    . 'data-week     = "'.$flowDate->format('W').'" '
                    . 'data-year-day = "'.$flowDate->format('W').'" '
                    . 'data-date     = "'. $current->format('Y-m-d') .'" '
                    . 'data-hour     = "'. $hour_start .'"><div>'. $workspace . '</div></td>';

比我在我的刀片中包含

{!! $service->hoursOnDays($supply, $employee, $workspaces, $dates, $data, $holidays) !!}

0 个答案:

没有答案