只有当我单击“新建”选项时，我才能打开我的模式？答案

【问题标题】：How can i open my modal only when i click on the "New" option?只有当我单击“新建”选项时，我才能打开我的模式？
【发布时间】：2021-03-02 10:21:19
【问题描述】：

我试图在 VueJS 中打开我的模式只有当我点击“新建”选项时，我该怎么做？

      <select v-model="input.des"   @change="$refs.modalName.openModal()">              
           <option value="A">A</option>
            <option value="B">B</option>
           <option value="New">New</option>
          </select>



openModal() {

  this.show = true;
  document.querySelector("body").classList.add("overflow-hidden");
},

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

最简单的方法是 watch 更改选项：

new Vue({
  el: '#app',

  data() {
    return {
      input: {
        des: ''
      },

      show: false
    }
  },

  methods: {
    openModal() {
      this.show = true;
      document.body.classList.add('overflow-hidden');
    }
  },

  watch: {
    'input.des'(val) {
      if (val === 'New') {
        //this.$refs.modalName.openModal();

        this.openModal();

        alert('Modal opened');
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <select v-model="input.des">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="New">New</option>
  </select>
</div>

【讨论】：

【解决方案2】：

您可以从event.target 中获取选定选项的选定值。您可以在here 的答案中找到更多相关信息。

将您的代码更改为：

<select v-model="input.des" @change="$refs.modalName.openModal">              
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="New">New</option>
</select>

openModal(event) {
    if (event.target.value == "New") {
        this.show = true;
        document.querySelector("body").classList.add("overflow-hidden");
    }
},

【讨论】：