Описание
У меня есть поле ввода, которое отправит запрос Axios через функцию debounce. Значение, которое уже присутствует в поле ввода, генерируется Laravel. Когда пользователь обновляет значение в поле, мне нужно, чтобы это значение было отправлено через запрос Axios.
Я не уверен, является ли это фактическим значением Пропорции, для которого мне нужно посмотреть изменения, или мне нужно сохранить обновленное значение в data()
части Vue.
edit-personal-details.blade.php (включено в другое представление)
<edit-personal-details name="{{ $cv->display_name }}" location="{{ $cv->location }}" phone="{{ $cv->contact_number }}" email="{{ $cv->email_address }}"></edit-personal-details>
EditPersonalDetails.vue (компонент)
<template>
<div class="grid grid-columns-2 grid-gap-8">
<div>
<label>
<span class="block font-bold mb-2 text-grey-500 text-sm">Display Name <i class="fad fa-question-circle leading-none text-blue-400" data-tippy-content="The name that will appear on your CV"></i></span>
<input type="text" :value="name" @input="updateDisplayName" class="bg-grey-200 border-2 border-grey-200 hover:border-grey-300 focus:border-blue-300 outline-none p-3 rounded text-grey-700 text-lg transition w-full font-semibold">
</label>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import Swal from 'sweetalert2'
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
})
export default {
props: ['name'],
methods: {
updateDisplayName: _.debounce(() => {
axios.post('url', {
display_name: this.name
})
.then(response => {
// Show success
})
.catch(response => {
Swal.fire({
type: 'error',
title: 'Error'
});
})
}, 1500),
}
}
</script>
Как именно я определяю, что значение Prop изменилось, и затем вставляю это в запрос Axios?
Мне нужно иметь возможность заполнять данные, а также сделать эти данные редактируемыми одновременно, и как только Vue обнаружит изменение, обновите его.
EDIT: я пытался использовать наблюдателии вычислил, но не смог получить его внутри запроса Axios.
Заранее благодарен за помощь.