In vue.js is it possible to notify "observers" to refetch the value from the observed data, without changing the value of the observed data

Question

Suppose that I have an input element bound like this:

<input :value="somedata">

The user types something in the input, and since I am not using v-model or altering somedata through a handler, the value of the element is now different from somedata. This is what I want, but I would also like to have the following capability:

Without changing the value of somedata I would like to be able to notify the element so that it sets its value equal to somedata again. Something like knockout's notifySubscribers() or valueHasMutated()

Is that possible in vue.js?

UPDATE: A clear illustration of the issue here: https://jsfiddle.net/gtezer5c/3/

Answer 1

It's a little difficult interpreting what exactly the requirements and acceptance criteria might be to suit your needs, and I thought Bill's solution was what you were after, but after all the updates and clarifications, I think I understand a little more what you're trying to accomplish: in short, I think you need a generic way to have an input that can hold a value but that can be independently reverted to some other value.

Please have a look at this CodePen. I believe it's providing what you're trying to do. It allows you to create an input element as a revertable component, which can optionally be passed a default value. Any changes to that input are maintained by the component with its value data property. It will not be observing/pulling in any lastKnownGood type of value because any reversion will be pushed into the component from outside.

Externally to the revertable component, you can $emit a revert event with a new value that will cause either all revertable components or a single revertable component (with a matching ID) to be reverted.

I feel like it's mostly a clean solution (assuming I'm understanding the requirements correctly), except that in VueJS 2 we have to use a standalone, shared Vue object to pass the events when there is no parent-child relationship. So you'll see:

const revertBus = new Vue()

defined in global scope in the demo. And the revertable component will use it to receive incoming messages like so:

revertBus.$on('revert', (value, id) => { ... }

and the controlling Vue object that is triggering the messages will use it like this:

revertBus.$emit('revert', this.reversionValue, targetId)

You can also emit the event with a null value to cause the revertable component to reset its value to its initial default value:

revertBus.$emit('revert', null, targetId)

Again, it's a mostly clean solution, and though it might not fit perfectly inline with what you're trying to accomplish, I'm hoping it might at least help you get closer.