Значение проповеди не обновляется для отправки через Axios - PullRequest
Новая
       7

Значение проповеди не обновляется для отправки через Axios

0 голосов
/ 01 ноября 2019

Описание

У меня есть поле ввода, которое отправит запрос 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.

Заранее благодарен за помощь.

1 Ответ

1 голос
/ 01 ноября 2019

Проблема в том, что вы используете :value для установки значения, а не получаете его из функции updateDisplayName. Вы должны передавать event.target.value вместо "статического" значения. Но лучший способ решить эту проблему - использовать свойство data с v-model

Другая проблема (я вижу) состоит в том, что вы изменяете опору внутри компонента. Во время выполнения Vue позволит вам сделать это, но если вы можете получить предупреждение: «Избегайте мутации напрямую с опорой»

Опора должна рассматриваться как неизменяемая с точки зрения компонентаЭто означает, что компонент не должен пытаться изменить его. Учитывая, что вы используете PHP для генерации этих значений во время рендеринга, эти значения не изменятся. Если вы хотите, чтобы переданный объект был изменяемым компонентом, вы должны скопировать значение в экземпляр компонента. 

export default {
    props: ['name'],
    data: function () {
      return {
        name_val: this.name
      }
    },
    methods: {
        updateDisplayName: _.debounce(function(){
            axios.post('url', {
                display_name: this.name_val
            })
            .then(response => {
                // Show success
            })
            .catch(response => {
                Swal.fire({
                    type: 'error',
                    title: 'Error'
                });
            })

        }, 1500),
    }
}

<input type="text" @input="updateDisplayName" v-model="name_val">

TL; DR;

Вы могли бы решить эту проблему, не копируя исходное значение в данные, просто выполнив это: 

<input type="text" @input="updateDisplayName" v-model="name">

но это не очень хорошая идея (см. Упомянутое выше предупреждение) или ссылку: https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated

update

Также, как указывал @skirtle, следует использовать function вместофункция массива в функции debounce. Похоже, что lodash использует function.apply для привязки контекста (https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L10333)

...