1

Здравствуйте подскажите пожалуйста как в моем случае получить значение в Vue в Laravel?

после не удачной валидации в компонент возвращается значение old('regionName'). Необходимо чтобы данное значение устанавливалось в input value.

                    <div id="js-autocomplete-region">
     <autocomplete-region-component :query="{{ json_encode(old('regionName')) }}"></autocomplete-region-component>
</div>

вот мой компонент

<template>
    <div>
        <input
            type="text"
            placeholder="Начните вводить ваш город и выберите его из списка"
            autocomplete="off"
            v-model="query"
            v-on:keyup="autoComplete"
            class="form-control js-region-name"
            name="regionName"
            value=""
        >
        <input
            type="hidden"
            class="form-control js-region-id"
            name="regionId"
            value="enteredRegion">
        <div class="panel-footer" v-if="results.length">
            <ul class="list-group select-region">
                <li class="list-group-item list-region" v-for="result in results" v-on:click="selectRegion(result)">
                    {{ result.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query: '',
                results: [],
            }
        },
        methods: {
            autoComplete() {
                this.results = [];
                if(this.query.length > 2){
                    axios.get('/api/regions',{params: {_limit: 2, query: this.query}}).then(response => {
                        this.results = response.data;
                    });
                }
            },
            selectRegion(result) {
                let inputWithRegionName = document.querySelector('.js-region-name');
                let inputWithRegionId = document.querySelector('.js-region-id');
                let listRegions = document.querySelector('.panel-footer');

                inputWithRegionName.value = result.name;
                inputWithRegionId.value = result.id;
                listRegions.hidden = true;
            }
        }
    }
</script>

PS пробовал такой вариант query устанавливал в props но появляется ошибка

введите сюда описание изображения

введите сюда описание изображения

3
  • Вам же написали в чем проблема и как ее решить в сообщении ошибки.
    – E_K
    31 мая 2020 в 21:42
  • @E_K гуглил, но не получилось решить вопрос.. если не сложно можете написать как правильно?
    – Vlad
    1 июн 2020 в 3:58
  • Вы вместо того что бы принять пропсы в компоненте, попытались их смутировать, по этому и ошибка ru.vuejs.org/v2/guide/components-props.html
    – RavenTheX
    3 июн 2020 в 6:44

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.