VueJS 在 <option> 元素上使用 @click 并在 <select> 元素上使用 @change

Question

我有一个简单的函数来处理真假之间的数据。我用它来使我的 div 像切换开关一样隐藏和可见。我也有一个三元素。我发现我不能将@click 用于<option> 元素，我需要将@change 用于我的<select>。

But in this way, whenever an is selected, the function is being triggered and my data toggles between true and false.这是我的<select> 元素；

       <select @change="isDisabled">
          <option>Please select a security type</option>
          <option>No Security</option>
          <option>Personal</option>
          <option>Enterprise</option>
       </select>

IsDisabled 函数接受一个变量并在 true 和 false 之间更改其值，因此我的 div 变为隐藏和可见，如下所示；

<div v-if="noSecurity">something</div>

但事情是这样的，我只想在用户选择“无安全性”选项时触发该功能。现在，只要我选择一个选项，它就会被触发，所以它变成了某种切换。但是当我选择“无安全性”选项时，我想隐藏 div，如果选择了不同的东西，则显示 div。我该怎么办？

Answer 1

您是否可以选择使用 v-model 而不是使用方法？如果是，请尝试以下操作：

HTML：

<div id="hello-vue" class="demo">
  <select v-model="security">
    <option>Please select a security type</option>
    <option>No Security</option>
    <option>Personal</option>
    <option>Enterprise</option>
  </select>
  <div v-if="security=='No Security'">something</div>
</div>

JS：

const HelloVueApp = {
  data() {
    return {
      security: undefined
    }
  }
}

Answer 2

不需要额外的noSecurity 变量。使用v-model 创建您的选择以跟踪所选值。给每个选项一个value 属性。

<select v-model="selected">
  <option value="">Please select a security type</option>
  <option value="none">No Security</option>
  <option value="personal">Personal</option>
  <option value="enterprise">Enterprise</option>
</select>

检查该值：

<div v-if="selected === 'none'">something</div>

您仍然可以使用noSecurity 检查您是否愿意通过创建计算：

computed: {
  noSecurity() {
    return this.selected === 'none';
  }
}

这是一个展示两者的演示：

new Vue({
  el: "#app",
  data() {
    return {
        selected: ''
    }
  },
  computed: {
    noSecurity() {
      return this.selected === 'none';
    }
  },
  methods: {},
  created() {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <option value="">Please select a security type</option>
    <option value="none">No Security</option>
    <option value="personal">Personal</option>
    <option value="enterprise">Enterprise</option>
  </select>

  <div v-if="selected === 'none'">something</div>
  <div v-if="noSecurity">something</div>
</div>

Answer 3

我制作了一个 CodeSandbox，您可以在其中看到结果：

https://codesandbox.io/s/magical-meitner-63eno?file=/src/App.vue

但这里是解释：

<template>
  <section>
    <select @change="isDisabled">
      <option>Please select a security type</option>
      <option>No Security</option>
      <option>Personal</option>
      <option>Enterprise</option>
    </select>
    <div v-if="noSecurity">You Choose no security, that's dangerous !</div>
  </section>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data() {
    return {
      noSecurity: false,
    };
  },
  methods: {
    isDisabled(e) {
      console.log("e", e.target.value);
       if (e.target.value === "No Security") {
        // do your change
        return (this.noSecurity = !this.noSecurity);
      }
     // to allow reset if another option is selected
      if (this.noSecurity) {
        return this.noSecurity = false;
      }
    },
  },
};
</script>

基本上当您使用@change 处理程序时，您的函数会收到一个事件，在此事件中您可以使用event.target.value 捕获目标值。

这样做，如果值等于 No Security（因此选中的项目），则执行条件，如果不是 No Security，则更改状态，你什么都不做，或者你做你想做的其他事情。

除此之外，我建议您将方法名称 isDisabled 更改为全局约定名称，例如 handleChange 或 onChange。

在您的选项中传递 id 值，因此当您收到选择事件时，您会清楚 No security 或您想更改的任何名称都是相同的。

因为如果有一天您将 No security 更改为另一个名称，则必须更新应用中的所有条件。 尽量避免使用字符串值，如果可以的话。

<option value="1">No Security</option> // :value="securityType.Id" for example if coming from your database
<option value="2">Personal</option>
<option value="3">Enterprise</option>

那么在你的函数中它将是

if (e.target.value === noSecurityId) {
 // do your change
 this.noSecurity = !this.noSecurity;
}
//...