Интерполяция не перерисовывается в родительском компоненте после пользовательского события от дочернего - PullRequest
Новая
       43

Интерполяция не перерисовывается в родительском компоненте после пользовательского события от дочернего

0 голосов
/ 03 февраля 2019

У меня есть выбор, отображаемый в цикле v-for: 

<div v-for="(n, key) in selectedLanguages">
    <select class="input input__col"
            v-model="currentLang[key]"
            @change="changeLanguage(currentLang[key], key)"
            id="lang_select">
        <option value="pl">Polski</option>
        <option value="en">Angielski</option>
        <option value="es">Hiszpański</option>
    </select>
</div>

Для каждого выбора я добавляю метод changeLanguage, который: 

<script>
    export default {
        data() {
            return {
                currentLang: []
            }
        },
        methods: {
            changeLanguage(value, key) {
                let data = { value, key };
                this.$nuxt.$emit('change::language', data);
            }
        },
        props: ['selectedLanguages']
    }
</script>

, и он находится в дочернем компоненте.В parent я слушаю это событие change::language: 

this.$nuxt.$on('change::language', res => {
    console.log(res);
    this.selectedLanguages[res.key] = res.value;
    console.log(this.selectedLanguages);

Хотя он работает правильно и обновляет массив selectedLanguages, он отлично переопределяет интерполяцию {{ selectedLanguages }} в parent.Тем не менее, он правильно переопределяет интерполяцию {{ selectedLanguages }} в дочернем элементе, где он передается реквизитом.Почему?

Кажется, что vue не "ловит", что массив selectedLanguages был изменен.Это только вижу когда я .push или .pop этот массив.Есть ли что-то вроде apply метода в vue?

Я нашел эту ссылку в документации: https://vuejs.org/v2/guide/list.html#Caveats и добавил this.$set(this.selectedLanguages, res.value, res.key); в parent ниже моего назначения, но это не исправило.

1 Ответ

0 голосов
/ 03 февраля 2019

Я нашел решение в Vue docs :

Из-за ограничений в JavaScript Vue не может обнаружить следующие изменения в массиве: когда вы непосредственно устанавливаете элемент с индексомНапример, vm.items [indexOfItem] = newValue

Я делал точно так же, как указано выше.

Решение вместо этого 

this.selectedLanguages[res.key] = res.value;

использовать 

this.$set(this.selectedLanguages, res.key, res.value);

что немного странно, но работает.

...