Vuetify v-select 防止输入

【问题标题】：Vuetify v-select prevent inputVuetify v-select 防止输入
【发布时间】：2020-07-20 21:07:52
【问题描述】：

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

用户故事：

我选择了一个选项。

确认弹出询问“是否要更改值？”

如果我确认，值就会改变。

如果我拒绝，值不会改变。

【问题讨论】：

你可以禁用选择并在它旁边有一个按钮来显示模式询问是否应该启用它？
@JasonAller 这是一个多选，您可以在其中添加和删除元素。如果用户决定更改它，我必须要求确认。然后，它将带有数据的请求发送到服务器。当然，我可以添加“保存”按钮，但这并不可取。
怎么监听blur事件，然后在触发blur事件时弹出一个确认窗口
@Sphinx 这是一个选项。不完美，但总比没有好。虽然我决定坚持使用按钮，但它更安全。

标签： vue.js vuetify.js v-select

【解决方案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

【讨论】：