Question

如果更改player.id，如何让触发器观看？目前它没有被触发。如果我更改this.player = 5然后它可以工作，但是如果我尝试这个.player.id = 5就没有。

我的组件看起来像这样：

<template>
    <div @click="changeVal()" class="player" :id="getId">
        {{ player.id }}
    </div>
</template>

<script>
    export default {
        name: 'Player',
        props: ['player'],
        computed: {
            getId() {
                return 'p' + this.player.id
            }
        },
        methods: {
            changeVal() {
                this.player.id = 5
            }
        },
        watch: {
            player: function(newVal, oldVal) {
                console.log('watch triggered');
            }
        },
    };
</script>

Answer 1

如评论中所述，您的模板变量不正确。它应该是

<div class="player" :id="getId">{{ player.id }}</div>

要触发数据更改功能，您可以在组件中使用watch。例如

watch: {
  'player.field': function(newValue, oldValue) {
    alert(`Field changed for player ${this.player.id} from ${oldValue} to ${newValue}`)
  }
}

演示〜https://jsfiddle.net/1ajty71p/4/

VueJs - 如果我更改了目标，会触发吗？

1 个答案: