响应式选择菜单不显示数组值

Question

我有一个根据所选标签显示值的导航栏

现在我想在移动视图中做同样的事情，为此，我有一个选择菜单而不是导航栏

但价值没有改变

但是当我选择不同的值时，值并没有改变，我做错了什么？问候

CodePen

代码：

<template>
  <div>
     <div class="sm:hidden">
      <label for="tabs" class="sr-only">Select a tab</label>
      <select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
        <option v-for="tab in tabs" :key="tab.name" :selected="tab.current">{{ tab.name }}</option>
      </select>
        <div >
    <div v-for="tab in tabs" @click="changeTab(tab)"  :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
      {{ tab.id }} - {{ tab.name }} - {{  tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
    </div>
  </div>
    </div>
 
    <div class="hidden sm:block">
     <nav class="flex space-x-4 " aria-label="Tabs" >
        <a v-for="tab in tabs" @click="changeTab(tab)"  :key="tab.name" :href="tab.href" :class="[tab.current ? 'bg-purple-700 text-white' : 'text-purple-700 hover:text-gray-700', 'px-12 py-2 font-medium text-sm rounded-full font-bold text-lg']" >
          {{ tab.name }}
        </a>
      </nav>
    </div>
     <div class="hidden sm:block">
    <div v-for="tab in tabs" @click="changeTab(tab)"  :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
      {{ tab.id }} - {{ tab.name }} - {{  tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
    </div>
  </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  setup() {
    const tabs = ref([
      { id: 1 , title: 'test title one', imageSrc:'/programs/test1.png' , content: '', name: 'LOREM', href: '#test1', current: true },
      { id: 2 , title: 'test title two',  imageSrc:'/programs/test2.png', content: '', name: 'IPSUM', href: '#test2', current: false },
      { id: 3 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
      { id: 4 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
      { id: 5 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
      { id: 6 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
      
    ])
    
    const  changeTab = (selectedTab) => {
      tabs.value.map(t => {
        t.id === selectedTab.id ? t.current = true : t.current = false
      });
    }
    
    return { tabs, changeTab }
    
  },
    computed: {
    img() {
      return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
    },
  },
}
</script>


<style lang="scss" scoped>
  nav {
    display: flex;
    gap: 20px; 
    background: #E5E5E5; 
    border-radius: 20px;
    width: 100%;
justify-content: space-between;
}
</style>

Answer 1

您的<select> 标签没有绑定。通常你应该有一个v-bind 或至少一个change 处理程序来更新数据。

您的change 处理程序可能如下所示：

<select
  @change="changeTab($event.target.value)"
>
...
</select>

Answer 2

尝试从option而不是从下面的div调用方法：

<div class="sm:hidden">
  <label for="tabs" class="sr-only">Select a tab</label>
  <select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" >
    <option v-for="tab in tabs" @click="changeTab(tab)" :key="tab.name" :selected="tab.current">{{ tab.name }}</option>
  </select>
  <div v-for="tab in tabs" :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
  {{ tab.id }} - {{ tab.name }} - {{  tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
  </div>
<div >