从父级到子级的动态道具绑定

Question

所以我从昨天开始就为此头疼。我想要某种两种方式的数据绑定。我希望我的数组 data(): exploredFields 能够更新子组件的值。但是更新是从孩子那里调用的。

这是我的父组件。

<div>
    <button @click="resetMinefield(rows, mineCount)">RESET</button>
</div>
<div class="minefield">
    <ul class="column" v-for="col in columns" :key="col">
        <li class="row" v-for="row in rows" :key="row">
            <Field
                    :field="mineFields[(row + (col - 1) * rows) - 1].toString()"
                    :id="(row + (col - 1) * rows) - 1"
                    :e="exploredFields[(row + (col - 1) * rows) - 1]" // This doesn't update the child !!!
                    @update="exploreField"
            />
        </li>
    </ul>
</div>

...

<script>
    import Field from "@/components/Field";

    export default {
        name: "Minesweeper",
        components: {
            Field,
        },
        created() {
            this.resetMinefield(this.rows, this.mineCount);
        },
        data() {
            return {
                rows: 7,
                columns: 7,
                mineCount: 5,
                mineFields: [],
                exploredFields: [],
            }
        },
        methods: {
            exploreField(index) {
                this.exploredFields[index] = true;
            },
            resetMinefield(fieldSize, mineCount) {
               // Updates this.mineFields
               // Passes data properly to the child
            }
        },
    }
</script>

这是一个子组件。在@click 上，它会更新自我data: explored 和父母data: exploredFields。但是props: e 的动态绑定不起作用。

<template>
    <div :class="classObject" @click="changeState">
        {{ field }}
    </div>
</template>

<script>
    export default {
        name: "Field",
        data() {
            return {
                explored: false,
            }
        },
        props: {
            id: {
                type: Number,
                default: -1,
            },
            field: {
                type: String,
                default: 'X',
            },
            e: {
                type: Boolean,
                default: false,
            }
        },
        methods: {
            changeState() {
                this.$emit("update", this.id);
                this.explored = true;
            }
        },
        computed: {
            classObject: function() {
                // Stuff here
            }
        },
    }
</script>

我还尝试对数据 :explored 而不是 props :e 进行动态绑定，但也没有效果。它似乎不想更新，因为我正在从孩子那里调用更新。即使我可以看到数据发生变化，它也不会动态地传回给孩子

Answer 1

看起来像一个普通的 Vue change detection caveat。

Vue 无法检测到数组的以下更改：

1. 当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue

这...

this.exploredFields[index] = true

不会反应。试试这个

this.$set(this.exploredFields, index, true)

Answer 2

你可能需要在你的子组件中的一个观察者，在道具“e”上

watch: {
  e(newValue){
    this.explored = newValue
  }
}

在我看来，其他一切都很好，一旦您单击该字段，您就会发出一个事件并在父级中收听该事件。