Как сделать UNDO vue select?

Question

[Ihor Bratukh]

Есть задача, при изменении select спросить у пользователя с помощью confirm действительно ли он хочет изменить данное значение. Само значение находится в vuex, через v-model и computed get/set значение меняется. На set стоит проверка с confirm, но при отмены изменений select всеравно изменяется хотя значение во vuex остается прежним. Как можно сделать функционал undo, чтобы onInput select не срабатывал?
codesandbox

<template>
  <div>
    Current real value: {{ selected }}
    <select v-model="selected" @input="onInput">
      <option v-for="(item, index) of list" :key="index" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "toster",

  data: () => ({
    vuex: 3,
    list: [1, 2, 3, 4, 5, 6]
  }),

  computed: {
    selected: {
      get() {
        return this.vuex;
      },
      set(value) {
        if (window.confirm("Realy change select?")) {
          this.vuex = value;
        }
      }
    }
  },

  methods: {
    onInput({ target: { value } }) {
      console.log("onInput", value);
    }
  }
};
</script>

Answer 1

[nvdfxx]

<select ref="selectr" v-model="selected" @input="onInput(e)">
      <option v-for="(item, index) of list" :key="index" :value="item">{{ item }}</option>
</select>

selected: {
      get() {
        return this.vuex;
      },
      set(value) {
        if (window.confirm("Realy change select?")) {
          this.vuex = value;
        } else {
          this.$refs.selectr.value = this.vuex;
        }
      }
}

Comments

[Ihor Bratukh]

Действительно, все круто сработало, спасибо!