vue.js - Vuetify v-select 防止输入

Question

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

用户故事：

1. 我选择一个选项。
2. 确认弹出询问“您要更改值吗？”
3. 如果我确认，值会改变。
4. 如果我否认，价值不会改变。

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;
    }
  }
};

代码沙盒