I'm having a strange issue in JavaScript / Vue.js. I'm trying to iterate through the properties of an object (newGame) and change their values to 'undefined'. They seem to pick up the value when I console.log() them from inside the for loop, but kind of "revert back" to their previous values after the loop. I'm pretty sure that I'm overlooking something here. The properties of newGame are also bound to some input elements with v-model. Here's the code snippet:

data() {
    return {
        newGame: {
            id: undefined,
            date: undefined,
            location: undefined,
            length: undefined,
            limit: undefined,
            buyIn: undefined,
            cashOut: undefined
        },
        games: Array
    };
},
methods: {
    addGame() {
        let newGameCopy = { ...this.newGame };
        newGameCopy.id = uuidv4();
        this.games = [...this.games, newGameCopy];

        console.log(this.newGame);

        // This one doesn't work.
        for (let property in this.newGame) {
            console.log(property);
            property = undefined;
            console.log(property);
        }
        console.log(this.newGame);

        // This one works.
        this.newGame.id = undefined;
        this.newGame.date = undefined;
        this.newGame.length = undefined;
        this.newGame.limit = undefined;
        this.newGame.buyIn = undefined;
        this.newGame.cashOut = undefined;
        this.newGame.location = undefined;

        console.log(this.newGame);
    },
}

CodePudding user response：

Reassigning an identifier, by itself, will not have any side effects (in the vast majority of situations) - unless you use the identifier (here, property) later, assigning something to it (like undefined) will have no effect. You need to assign undefined to the newGame object`, so as to actually mutate the object:

for (let property in this.newGame) {
  this.newGame[property] = undefined;
}