1

Коллеги, я новичок во vue, подскажите пожалуйста, такая проблема.

Использую стек laravel + vue.

У меня есть два компонента. Первый - таблица, второй - форма добавления нового элемента (модальное окно бутстрапа, обернутое в компонент vue).

На форме есть список множественного выбора. Я через props передаю все options для списка из родительского компонента (таблицы) и хочу, чтоб, когда я открою форму, все элементы списка были выбраны.

Делаю все по документации. Чтоб не менять из дочернего компонента значения родительского, я создаю локальное значение в дочернем компоненте через data. Но в момент использования это локальное значение всегда пустое!

  1. Вызов дочернего компонента (формы добавления):

        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">id приложения</th>
                <th scope="col">Наименование</th>
                <th scope="col">Описание</th>
                <th scope="col">Картинка</th>
                <th scope="col">URL</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="sportSite in sportSites">
                <th scope="row">{{ sportSite.id }}</th>
                <td>
                    <template v-for="application in sportSite.applications">
                       id {{ application.id }} => {{ application.name }} <br>
                    </template>
    
                </td>
                <td>{{ sportSite.name }}</td>
                <td>{{ sportSite.description }}</td>
                <td>
                    <img style="width: 100px; height: 100px;" :src="sportSite.image" >
                </td>
                <td>
                    <a :href="sportSite.url" target="_blank">{{ sportSite.url }}</a>
                </td>
                <td>
                </td>
            </tr>
    
            </tbody>
        </table>
    
      </div>
    </template>
    
    <script>
      import { EventBus } from '../../app';
    
      export default {
        name: "SportSitesTable",
        created() {
        },
        mounted(){
            this.loadTable();
            this.getApplications();
        },
        methods:{
            loadTable: function () {
                window.axios.get('/sport_sites_all')
                    .then(resp => {
                        this.sportSites = resp.data.data;
                    }).catch(err => {
                        console.error("Ошибка загрузки данных с сервера!");
                        console.error(err);
                });
            },
            getApplications: function () {
                 window.axios.get('/applications/all')
                    .then(resp => {
                        this.applicationsAll = resp.data.applications.data;
                        this.$forceUpdate();
                    }).catch(err => {
                     console.error('Ошибка получения списка приложений!');
                     console.error(err);
                 });
            }
        },
        data(){
            return {
                sportSites: [],
                applicationsAll: [],
            }
        },
      }
    </script>
    
  2. Реализация дочернего компонента (где множественный селект):

    <template>
      <div>
        <button type="button" class="btn btn-primary my-2" data-toggle="modal" data-target="#sportSiteAdd">
            Добавить
        </button>
    
        <div class="modal fade" id="sportSiteAdd" tabindex="-1" role="dialog" aria-labelledby="sportSiteAddLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sportSiteAddLabel">Добавить спортивный сайт</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
    
                        <ul class="alert-danger">
                            <li v-for="error in errors">
                                {{ error[0] }}
                            </li>
                        </ul>
    
                        <form>
                            <div class="form-group">
                                <label for="name">Заголовок</label>
                                <input type="text" class="form-control" id="name" name="name" v-model="formFields.name">
                            </div>
    
                            <div class="form-group">
                                <label for="image">Картинка</label>
                                <input type="text" class="form-control" id="image" name="image" v-model="formFields.image">
                            </div>
    
                            <div class="form-group">
                                <label for="url">URL</label>
                                <input type="text" class="form-control" id="url" name="url" v-model="formFields.url">
                            </div>
    
                            <div class="form-group">
                                <label for="description">Описание</label>
                                <textarea class="form-control" id="description" name="description" v-model="formFields.description"></textarea>
                            </div>
    
                            <div>
                                <label class="typo__label">Связанные приложения</label>
                                <multiselect v-model="applications"
                                             tag-placeholder="Связанные приложения"
                                             placeholder="Поиск"
                                             label="name"
                                             track-by="id"
                                             :options="allApplications"
                                             :multiple="true"
                                             :taggable="true">
                                </multiselect>
                            </div>
    
                        </form>
    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                        <button type="button" class="btn btn-primary" v-on:click="submit">Сохранить</button>
                    </div>
                </div>
            </div>
          </div>
      </div>
    </template>
    
    <script>
      import { EventBus } from '../../app';
      import Multiselect from 'vue-multiselect'
    
      export default {
        name: "SportSitesAdd",
        props: ['allApplications'],
        mounted: function(){
        },
        methods:{
            submit: function (e) {
                window.axios.post('/sport_site/add/', this.formFields)
                    .then(res => {
                        console.log('Saved!');
                        $('#sportSiteAdd').modal('hide');
    
                        this.formFields.name = '';
                        this.formFields.image = '';
                        this.formFields.url = '';
                        this.formFields.description = '';
    
                        EventBus.$emit('reloadApplicationsTable');
                    }).catch(err => {
                    if(err.response.status === 422){
                        this.errors = err.response.data.errors || [];
                    }
                    console.error('Ошибка сохранения!');
                });
            },
        },
        data(){
            return {
                formFields: {
                    name: '',
                    image: '',
                    url: '',
                    description: '',
                },
                applications: this.allApplications,
                errors: [],
            }
        },
        components: {
            Multiselect
        },
      }
    
    </script>
    

При этом, если я укажу в качестве options и values в списке свойство allApplications то все работает.

Но сами понимаете, это никуда не годится.

Во-первых, vue предупреждает, что я из дочернего меняю значение в родительском, во вторых, при удалении элемента из списка, он удаляется из родительского. И список так потихоньку "пустеет"))

Если удалить все, то и выбирать будет нечего потом, так как элементов не останется в родительском компоненте.

Вот результат, который я бы хотел видеть, то есть, открываешь - и все выбрано:

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

2 ответа 2

2

В JS объекты передаются по ссылке. Это значит что когда Вы пишите applications: this.allApplications - вы не создаете новый объект, а передаете ссылку на исходный. Поэтому все действия как с исходным, так и с "новым" объектом, отображаются друг на друге.

В строке applications: this.allApplications напишите так applications: Object.assign({}, this.allApplications) - это должно решить проблему

П.С: либо так

computed: {
  applications() {
  return Object.assign({}, this.allApplications)
  }
}
2
  • Не помогло. У меня скопировался туда пустой объект. Вывел что там при маунте компонента. Вот joxi.ru/YmExjOMT0PJz7r 10 янв 2019 в 11:37
  • сделайте это в методе computed
    – Dmytro
    10 янв 2019 в 11:48
1

Есть один простой способ, нужно создать вотчер на allApplications

watch: {
  allApplications: {
    immediate: true,
    handler(value) {
      this.applications = { ...value };
    },
  }
}

Ваш ответ

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

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