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

Question

我有一个简单的函数可以在 true 和 false 之间操纵数据。我用它来使我的 div 像切换一样隐藏和可见。我也有一个三元素。我发现我不能对 <option> 元素使用 @click，我需要对我的 <select>.

使用 @change

但是这样一来，每当 an 被 selected 时，函数就会被触发，我的数据就会在 true 和 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>

但事情是这样的，我只想在用户select“无安全”选项时触发该功能。现在每当我 select 一个选项时它就会被触发，所以它变成了某种切换。但是我想在 select “无安全”选项时隐藏 div 并在 selected 时显示 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 创建您的 select 以跟踪 selected 值。给每个选项一个 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（所以 selected 项目），你就改变了你的状态，如果不是没有安全措施，你什么都不做，或者你做了你想做的其他事情。

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

在您的选项中传递 id 值，这样当您收到 select 事件时，您很清楚 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;
}
//...

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

VueJS Using @click on <option> elements and @change on <select> element

vue.js

onclick

onchange