Vuetify v-select prevent input

Question

How I can prevent an input event on Vuetify's v-select element to ask confirmation first.

User Story:

I select an option.

Confirm pops up asking "Do you want to change the value?"

If I confirm, the value changes.

If I deny, the value does not change.

Can you disable the select and have a button next to it that will present the modal asking if it should be enabled? — Jason Aller
@JasonAller it's a multi-select where you can add and remove elements. I have to ask confirmation if the user decides to change it. Then, it sends a request with the data to a server. Of course, I can add the "Save" button, but it's not preferable. — Romanov Eugene
what about listen blur event, then popup one confirmation window when blur event is triggered — Sphinx
@Sphinx it's an option. Not perfect, but better than nothing. Although I decided to stick with the button, it's safer. — Romanov Eugene

User 28 User 28 · Accepted Answer · 2020-07-21T09:04:46

Then you should use separate variable for data and input. And use change event to toggle dialog.

Example Code:

<v-app>
  <v-container>
    <v-select label="Standard" v-model="input" :items="items" @change="change"/>
    <v-dialog ref="dialog" v-model="dialog">
      <v-card>
        <v-card-title>Do you want to change the value?</v-card-title>
        <v-card-actions>
          <v-btn text @click="discardChange">Cancel</v-btn>
          <v-btn color="primary" text @click="acceptChange">Accept</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
  <div>Value: {{ value }}</div>
</v-app>

export default {
  data: () => ({
    dialog: false,
    value: "Fizz",
    input: "Fizz",
    items: ["Foo", "Bar", "Fizz", "Buzz"]
  }),
  methods: {
    change() {
      this.dialog = true;
    },

    discardChange() {
      this.input = this.value;
      this.dialog = false;
    },

    acceptChange() {
      this.value = this.input;
      this.dialog = false;
    }
  }
};

CodeSandbox

Vuetify v-select prevent input

1 Answers