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而不是道具:e进行动态绑定，但是也没有效果。它接缝它不想更新，因为我从孩子那里叫更新。即使我看到数据在变化，它也不会动态传递回子级

Answer 1

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

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

直接用索引设置项目时，例如https://code.jquery.com/

这个...

vm.items[indexOfItem] = newValue

不会反应。试试这个

this.exploredFields[index] = true

Answer 2

您可能需要的是在子组件“ e”上的观察者

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

对我来说，其他所有事情都看起来不错，一旦您单击该字段，您就会发出一个事件并在父级中监听该事件。

从父母到孩子的动态道具绑定

2 个答案: