Замена лезвия laravel на vue
У меня есть существующий шаблон блейда laravel, и я переписываю его, используя компоненты Vue внутри шаблона блейда. Например, одна существующая строка в шаблоне блейда:
<button class = "btn-remove" onclick = "removeItem('{{ $item->id }}', this);"></button>
Это ссылка на функцию php с именем removeItem.
Есть ли способ вызвать функцию php в новом компоненте Vue или мне нужно переделать функцию php в javascript?
Ответы 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.
спасибо Даниэль. Единственный экземпляр removeFromCart — это функция php внутри контроллера аккаунта: public function removeFromCart(CartRemoveFormRequest $request) { logic here}
Вам, вероятно, потребуется раскрыть это через конечную точку API.
Что такое удалить элемент? Я не думаю, что это «функция php» в соответствии с вашим кодом.