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

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({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; input: {&nbsp; &nbsp; &nbsp; &nbsp; des: ''&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; show: false&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; openModal() {&nbsp; &nbsp; &nbsp; this.show = true;&nbsp; &nbsp; &nbsp; document.body.classList.add('overflow-hidden');&nbsp; &nbsp; }&nbsp; },&nbsp; watch: {&nbsp; &nbsp; 'input.des'(val) {&nbsp; &nbsp; &nbsp; if (val === 'New') {&nbsp; &nbsp; &nbsp; &nbsp; //this.$refs.modalName.openModal();&nbsp; &nbsp; &nbsp; &nbsp; this.openModal();&nbsp; &nbsp; &nbsp; &nbsp; alert('Modal opened');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }})<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script><div id="app">&nbsp; <select v-model="input.des">&nbsp; &nbsp; <option value="A">A</option>&nbsp; &nbsp; <option value="B">B</option>&nbsp; &nbsp; <option value="New">New</option>&nbsp; </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");    }},