Компонент Vue.js в сочетании с проверкой формы Laravel (т.е. передача начального значения для данных)

После долгих поисков в Google и поиска форума Vue.js я готов сдаться.

Я создаю компонент поиска почтового индекса, и все работало хорошо, пока я не попытался объединить его с проверкой формы Laravel, особенно когда возникает ошибка, и форма повторно заполняет старые значения.

Надеюсь, я охватила все здесь. У меня есть частичный ввод формы, который я использую, который генерирует каждый ввод формы. Он также использует значение Laravel old(...), если оно присутствует.

Проблема заключается в том, что значение по умолчанию (в данном случае для почтового индекса и адреса) представляет собой пустую строку, это переопределяет атрибут значения ввода почтового индекса и содержимое текстовой области адреса.

В подготовленной земле идеальным было бы:

data : function() {
    return {
        postcode        : old('postcode'),
        address         : old('address'),
        addresses       : [],
        hasResponse     : false,
        selectedAddress : ''
    };
},

Так вот что я пытаюсь повторить.

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

Насколько я понимаю:

• Я не могу установить начальное значение данных, так как это переопределит входное значение.
• Я могу установить реквизит, но он неизменен
• Любая помощь, которую я могу найти, предлагает «использовать вычисляемое свойство, которое определяет его значение из опоры», но если вы буквально сделаете это, оно не обновится.

Вот что у меня есть до сих пор:

<so-postcode-lookup initial-postcode="{{ old('postcode') }}" initial-address="{{ old('address') }}"></so-postcode-lookup>

/**
 * Allow user to select an address from those found in the postcode database
 */
Vue.component('so-postcode-lookup', {
    name     : 'so-postcode-lookup',
    template : '#so-postcode-lookup-template',
    props    : ['initialPostcode', 'initialAddress'],
    data     : function() {
        return {
            postcode        : '',
            address         : '',
            addresses       : [],
            hasResponse     : false,
            selectedAddress : ''
        };
    },
    computed : {
        currentAddress : function() {
            if (this.address !== '') {
                return this.address;
            } else {
                return this.initialAddress;
            }
        },
        currentPostcode : function() {
            if (this.postcode !== '') {
                return this.postcode;
            } else {
                return this.initialPostcode;
            }
        },
        hasAddresses : function() {
            return this.addresses.length;
        },
        isValidPostcode : function() {
            return this.postcode !== '' && this.postcode.length > 4;
        },
        isInvalidPostcode : function() {
            return !this.isValidPostcode;
        }
    },
    methods : {
        fetchAddresses : function() {
            var resource = this.$resource(lang.ajax.apiPath + '/postcode-lookup{/postcode}');
            var $vm      = this;
            var element  = event.currentTarget;

            // Fetch addresses from API
            resource.get({ postcode : this.postcode }).then(function(response) {
                response = response.body;

                if (response.status == 'success') {
                    // Update addresses property, allowing select to be displayed
                    $vm.addresses = response.data;
                } else {
                    $vm.addresses = [];
                }

                this.hasResponse = true;
            });
        },
        setAddress : function() {
            this.address = this.selectedAddress;
        }
    }
});

<template id="so-postcode-lookup-template">
    <div class="row">
        @include('partials.input', [
            'label'                  => trans('register.form.postcode'),
            'sub_type'               => 'postcode',
            'input_id'               => 'postcode',
            'autocorrect'            => false,
            'input_attributes'       => 'v-model="currentPostcode"',
            'suffix_button'          => true,
            'suffix_button_reactive' => trans('register.form.postcode_button_reactive'),
            'suffix_text'            => trans('register.form.postcode_button'),
            'required'               => true,
            'columns'                => 'col-med-50',
            'wrapper'                => 'postcode-wrapper'
        ])

        <div class="col-med-50 form__item" v-show="hasResponse">
            <label for="address-selector" class="form__label" v-show="hasAddresses">{{ trans('forms.select_address') }}</label>
            <select id="address-selector" class="form__select" v-show="hasAddresses" v-model="selectedAddress" @change="setAddress">
                <template v-for="address in addresses">
                    <option :value="address.value">@{{ address.text }}</option>
                </template>
            </select>
            <so-alert type="error" allow-close="false" v-show="!hasAddresses">{{ trans('forms.no_addresses') }}</so-alert>
        </div>

        @include('partials.input', [
            'label'            => trans('register.form.address'),
            'input_id'         => 'address',
            'type'             => 'textarea',
            'input_attributes' => 'v-model="currentAddress"',
            'required'         => true
        ])
    </div>
</template>

Если я попробую это и установлю модель входов на currentPostcode и currentAddress соответственно, я, похоже, получу бесконечный цикл.

Мне кажется, я как-то преувеличиваю.