Vuetify v-select 防止输入

Question

如何防止 Vuetify 的 v-select 元素上的输入事件先询问确认。

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.

Answer 1

那么你应该为数据和输入使用单独的变量。并使用 change 事件来切换对话框。

示例代码：

<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 防止输入

Vuetify v-select prevent input

vue.js

vuetify.js

v-select