Замена лезвия ларавеллы на Vue

Question

У меня есть существующий шаблон лезвия Laravel, и я переписываю его, используя компоненты Vue внутри шаблона лезвия.
Например, одна существующая строка в шаблоне блейда:

<button class="btn-remove" onclick="removeItem('{{ $item->id }}', this);"></button>

Ссылка на функцию php с именем removeItem.
Есть ли способ вызвать функцию php в новом компоненте Vue или мне нужно переделать функцию php в javascript?

Answer 1

Я полагаю, вы имеете в виду, что шаблон ссылается на функцию removeItem, которая определена где-то в JS-скриптах, которые работают с вашим блейдом.

Если вы переносите весь блейд в экземпляр VueJs, вам нужно переместить методы, используемые компонентом Vue, в его определение ViewModel.

Вам также потребуется передать любые данные, поступающие из PHP как prop, или извлечь их из API , чтобы компонент мог получить к ним доступ после его визуализации.

Для вашего примера, компонент будет выглядеть примерно так (используя опору).

Vue.component('MyComponent', {
    template:  `
        <div>
            <button class="btn-remove" @click="removeItem"></button>
        </div>
    `,
    props: {
        itemId: String
    },
    methods: {
        removeItem() {
            // Handle click event
            this.$emit('remove', this.itemId); // for example
        }
    }
})

И в вашем блейд-файле вы бы заменили на:

<MyComponent item-id="{{$item->id}}"/>

Vue заменит вышеприведенный шаблон на шаблон, указанный в вашем компоненте, и PHP-привязки будут переданы в виде текста в ваш HTML.