插不从孩子的自定义事件后对父组件重新解析

Question

我已经选择显示在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);父，但它并没有解决。

Answer 1

我发现在Vue docs的解决方案：

由于在JavaScript的限制，Vue的不能检测进行以下更改的数组：当直接设置的项与索引，例如vm.items [indexOfItem] = NEWVALUE

我是做酷似以上。

该解决方案是不是

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

采用

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

这基本上是一个有点怪异，但它的工作原理。