如何更改 Vuejs3 上的 <select> 值？

Posted 2023-03-16

【中文标题】如何更改 Vuejs3 上的 <select> 值？

【英文标题】：How to change <select> value on Vuejs3?

【发布时间】：2022-01-19 06:59:42

【问题描述】：

我想更改 <select> 的值以获取 ul > li 的值，并在 <select> v-model 上使用此值 id。

<div>
    <select id="selected" @click="show-modal" v-model="subcategory_id">
       <option></option>
    </select>
</div>

<div class="modal">
    <header class="modal-card-head">
        <p class="modal-card-title">Choose category</p>
        <button @click.prevent="close-modal" class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
        <div class="card ">
             <ul class="cl-menu">
                  <li v-for="category in categories" :key="category.id" >
                  <a href="#">category.name                                                            
                   <ul>
                     <li @click="getLi(sub)" v-for="sub in category.subcategory" :key="sub.id">
                       <a class="px-2" href="#">sub.name</a>
                     </li>
                   </ul>  
                  </li>
             </ul>
        </div>
    </section>
</div>

Vuejs

getLi: function(e) 
    const m = document.querySelector('.modal');
    document.getElementById("selected").options[0].value = e.name;
    m.classList.toggle('is-active')
    console.log(e.name)

我能够从列表中获取值，但无法将其传递给 select 值和值的 id 到 v-model。 提前致谢

【问题讨论】：

您不应该将 Vue 与 vanilla DOM API 混合使用。 Vue 具有 DOM 的内部表示，当 Vue 需要重新渲染时，您直接更改的任何内容都可能会丢失。

@click="subcategory_id = sub"

我不明白你在做什么，如果你不介意，可以再解释一下吗？

【参考方案1】：

不要像@Thomas 所说的那样操作 DOM，而应该使用 Vue 的数据绑定：

new Vue(
  el: '#app',
  template: `<div><div>
    <select id="selected" @click="show-modal" v-model="subcategory_id" disabled>
                  <optgroup v-for="category in categories" :key="category.id" :label="category.name">
                     <option v-for="sub in category.subcategory" :key="sub.id" :value="sub.id">
                       sub.name
                     </option> 
                  </optgroup>
    </select>
    <button @click="openModal">Choose</button>
</div>

<div class="modal" v-if="showModal">
    <header class="modal-card-head">
        <p class="modal-card-title">Choose category</p>
        <button @click.prevent="closeModal" class="delete" aria-label="close">&times;</button>
    </header>
    <section class="modal-card-body">
        <div class="card ">
             <ul class="cl-menu">
                  <li v-for="category in categories" :key="category.id" >
                  category.name                                                            
                   <ul>
                     <li @click="getLi(sub)" v-for="sub in category.subcategory" :key="sub.id">
                       <a class="px-2" href="#">sub.name</a>
                     </li>
                   </ul>  
                  </li>
             </ul>
        </div>
    </section>
</div></div>`,
  data() 
    return 
      showModal: true,
      subcategory_id: null,
      categories: [
        name: 'A',
        id: 1,
        subcategory: [
          name: 'A.1',
          id: 2
        ]
      , 
        name: 'B',
        id: 3,
        subcategory: [
          name: 'B.1',
          id: 4
        ]
      ]
    
  ,
  methods: 
    getLi: function(subId) 
      this.subcategory_id = subId.id
      this.closeModal()
    ,
    closeModal() 
      this.showModal = false
    ,
    openModal() 
      this.showModal = true
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：

非常感谢它起作用了，但是点击时如何不显示<select>下拉菜单？因为模态应该在点击时出现。

不客气。您不希望<select /> 在点击时不打开吗？禁用它呢？

是的，用户从模态而不是从下拉列表中选择类别，我尝试禁用但没有按我的意愿工作，单击时模态未出现

当然，我在<select /> 中添加了disabled 和切换模式的功能。请参阅我的更新答案。

好的明白，谢谢..