Почему этот v-bind: value работает?
Я делаю систему корзины, используя Laravel и Vue. У меня есть объект данных в моем файле Vue, cart.js:
data: {
material: {
id: '',
qty: '1',
},
}
И когда на странице продукта нажимается кнопка «Добавить в корзину», вызывается следующая функция:
addToBasket: function(){
var that = this;
var item = this.material;
this.$http.post('/api/buy/addToBasket', item).then(response => {
this.basketAddSuccess = true;
}, response => {
//error
});
}
Однако это не удается с ошибкой 500, потому что, насколько я вижу, идентификатор не привязан к экземпляру Vue. Вот код просмотра:
<form v-on:submit.prevent = "addToBasket(material)">
<input type = "hidden" v-model = "material.id" v-bind:value = "{{ $material->id }}">
<div class = "form-group">
<label for = "qty">Quantity</label>
<input class = "form-control" name = "qty" type = "number" v-model = "material.qty" v-bind:value = "1">
</div>
<button class = "btn btn-block btn-primary">@{{ buttonText }}</button>
</form>
Laravel правильно вводит значение в соответствии с визуализированным кодом:
<input type = "hidden" v-model = "material.id" value = "1">
Но это не привязано к Vue. Я пробовал каждую перестановку v-model и v-bind (я знаю, что вы не должны использовать оба на одном входе - это только последняя в длинной череде попыток), о которых я могу думать, но ничего не работает. Помощь!
@BhojendraNepal, спасибо - я исправил эту функцию. Однако это все еще не решает проблему несвязанности значения ...
v-model переопределит атрибут value. Вам нужно будет установить id в data.
@Bert, как мне передать идентификатор в данные, если не путем захвата его в поле формы?
Я не любитель laravel, но вы рендерите сценарий, поэтому я ожидаю, что это будет что-то вроде data: { material: {id: {{ $material->id }}, ...}}.
@Bert К сожалению, нет, Javascript просто сбивает с толку из-за неожиданного {.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно установить значение в объекте данных, а не в шаблоне, потому что вы используете директиву v-model. Вы должны взглянуть на это, это хорошо объясняет, как директива модели v-model работает в фоновом режиме: https://alligator.io/vuejs/add-v-model-support/
РЕДАКТИРОВАТЬ 1: Я просто написал пример с несколькими материалами. Я все равно не уверен, поможет ли это вам:
Шаблон
<template>
<div class = "materials">
<form
class = "material"
v-for = "material in materials"
:key = "material.id"
@submit.prevent = "addToBasket(material)"
>
<div class = "form-group">
<label for = "quantity">Quantity</label>
<input type = "number" name = "quantity" :value = "material.qty">
</div>
<button class = "btn btn-block btn-primary">@{{ buttonText }}</button>
</form>
</div>
</template>
Javascript, $ materials - это массив объектов Laravel PHP, содержащий ключ id и ключ количества
export default {
data() {
return {
basketAddSuccess : false,
materials : {!! json_encode($materials) !!}
};
},
methods : {
addToBasket(material) {
this.$http.post('/api/buy/addToBasket', material).then(response => this.basketAddSuccess = true).catch(error => console.info(error))
}
}
}
Как я могу сделать это без использования элемента формы?
Только что отредактировал свой пост. Я не уверен насчет цели, которую вы пытаетесь достичь, так что это может быть не то, что вы хотели: /
Спасибо за ваши усилия - всего по одному материалу на странице. Пользователь щелкает материал, Laravel берет его из базы данных и отображает страницу, а должен вводит идентификатор этого материала в форму, чтобы Vue мог добавить его в корзину. Это то, чего не происходит.
Я не привык к рендерингу на стороне сервера vueJS laravel. Загружается ли приложение VueJS полностью, когда вы выбираете материал в списке? Или вы выполняете асинхронный вызов laravel для получения данных о выбранных материалах? В любом случае, это в основном то же самое. Вам нужно заполнить свой объект в функции данных vuejs. data() { return { material: { id : {{$material->id}}, quantity : 1}} Затем в вашем методе addToBasket просто отправьте this.material в параметрах вашему вызову API.
У вас есть
addToBasket(material), но вы не видите аргумент в определении функции.