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和{加入{1}}在低于我分配父但它并没有解决

Answer 1

我在Vue docs中找到了解决方法：

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

我像上面那样做得很出色。

解决方法是

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

使用

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

这基本上有点奇怪，但是可以用。

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

1 个答案: