如何仅在单击“新建”选项时打开我的模式？

Question

仅当我单击“新建”选项时，我才尝试在 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");},

Answer 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>

Answer 2

您可以从 中获取所选选项的选定值event.target。

将您的代码更改为：

<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");

    }

},