Vue: V-modeled number selector not reflecting changed value

Question

I have a number selector that allows you to select the frame you want an objects animation to start on. The start frame cannot be lower than 0, or higher than the maximum frames that exist in the object, so I wrote some code to validate and clamp the values.

The issue I'm having is that if I console.log(this.object.startFrame) the value is always printed as the correct clamped value, however when I click the up and down arrows on the number box, the value will increase/decrease indefinitely.

Object code

class Object{
    constructor(){
        this.frames = [/*some animation frames*/];
        this._startFrame = 0;
        /*...more properties*/
    }

    get startFrame(){return this._startframe}
    set startFrame(newFrame){
        this._startFrame = newFrame;
        //update cached frame buffer and stuff
    }
}

Vue number selector code

<input type="number" id="frameStart"  v-model="startFrame"/>

Vue computed property code

startFrame: {
    get(){
        return this.object.startFrame;
    },
    set(newFrame){
        this.object.startFrame = Math.max(Math.min(newFrame, this.object.frames.length - 1), 0);
    }
}

I tried moving the validation code into the Object's get/set methods, but Vue still won't show the clamped values in the number box.

Esteban MANSART Esteban MANSART · Accepted Answer · 2020-11-03T21:16:54

You missed the underscore for the input

<input type="number" id="frameStart"  v-model="startFrame"/>

And for getter and setter

startFrame: {
    get(){
        return this.object.startFrame;
    },
    set(newFrame){
        this.object.startFrame = Math.max(Math.min(newFrame, this.object.frames.length - 1), 0);
    }
}

Vue: V-modeled number selector not reflecting changed value

1 Answers