来自子组件的自定义事件后，插值不会在父组件中重新呈现答案

【问题标题】：Interpolation doesn't rerender in parent component after custom event from child来自子组件的自定义事件后，插值不会在父组件中重新呈现
【发布时间】：2019-02-02 21:55:15
【问题描述】：

我已经选择在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>

它在子组件中。在父母中，我正在听这个change::language 事件：

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

虽然它工作正常并且正在更新 selectedLanguages 数组，但它不会在父级中重新渲染插值 {{ selectedLanguages }}。然而，它正确地重新渲染插值{{ selectedLanguages }} 在子元素中它通过道具传递。为什么？

似乎 vue 没有“捕捉到”selectedLanguages 数组已更改。它只在我.push 或.pop 这个数组时看到。 vue中有apply之类的方法吗？

我在文档中找到了这个链接：https://vuejs.org/v2/guide/list.html#Caveats 并在我的作业下方的父级中添加了this.$set(this.selectedLanguages, res.value, res.key);，但它没有修复。

【问题讨论】：

标签： vue.js vuejs2 interpolation two-way-binding

【解决方案1】：

我在Vue docs找到了解决方案：

由于 JavaScript 的限制，Vue 无法检测到数组的以下更改：当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue

我做的和上面的完全一样。

解决方案是

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

使用

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

这基本上有点奇怪，但它有效。

【讨论】：

splice 也可以，重新分配整个数组也是如此。