Question

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

用户故事：

我选择一个选项。

确认弹出，询问“您要更改值吗？”

如果我确认，则值会更改。

如果我拒绝，则该值不会更改。

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

1 个答案: