回應式選擇選單不顯示陣列值

我有一個導航條，根據選定的標簽顯示數值

現在我想在移動視圖中做完全相同的事情，為此，我有一個選擇選單，而不是導航條

但是價值并沒有得到體現。

但價值并沒有改變

但數值沒有變化。

但是當我選擇不同的值時，值并沒有改變，我做錯了什么呢？請注意

CodePen

代碼：

<template>
  <div> 
     <div class="sm:hidden"/span>>
      <label for="標簽" class="sr-only"> 選擇一個標簽</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"/span> :key="tab. name" :selected="tab.current">{{ tab.name }}</option> 
      </select>/span>
        <div>/span>
    < div v-for="tab in tabs" @click="changeTab(tab)"/span> : key="tab. name" :href="tab.  class="px-12" :class="[tab.current || 'hidden']"> 
      {{ tab.id }}} - {{ tab.name }}} - {{ tab.href }}} - {{tab.title }}} - {{標簽.影像源}}{標簽.影像源}}
    </div>。
  </div>/span>
    </div>/span>
 
    <div class="hidden sm:block"/span>>
     < nav class="flex space-x-4" aria-label="Tabs" >
        < a v-for="tab in tabs" @click="changeTab(tab)"/span> : 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']"/span> >
          {{ tab.name }}}
        </a> 
      </nav> 
    </div>/span>
     <div class="hidden sm:block"/span>>
    < div v-for="tab in tabs" @click="changeTab(tab)"/span> : key="tab. name" :href="tab.  class="px-12" :class="[tab.current || 'hidden']"> 
      {{ tab.id }}} - {{ tab.name }}} - {{ tab.href }}} - {{tab.title }}} - {{標簽.影像源}}{標簽.影像源}}
    </div>。
  </div>/span>
  </div>/span>
</template>

<script lang="ts"/span>>
import { ref } from 'vue'/span>
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: '測驗標題二', imageSrc:'/programs/test2.png', 內容: '', name: 'IPSUM', href: '#test2', current: false },
      { id: 3 , title: '測驗標題三', 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: '測驗標題三', 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>/span>
  nav {
    display: flex;
    差距。20px; 
    background: #E5E5E5; 
    border-radius: 20px;
    width: 100%;
justify-content: space-between;
}
</style> 

uj5u.com熱心網友回復：

你的<select>標簽沒有系結。通常你應該有一個v-bind或至少一個change處理程式來更新資料。

你的change處理程式可以是這樣的：

<select。
  @change="changeTab（$event.target.value）"
>
...
</select>/span> ...

uj5u.com熱心網友回復：

嘗試從option中呼叫方法，而不是從下面的div中呼叫：

<div class="sm:hidden"/span>>
  < label for="tabs" class="sr-only" > 選擇一個標簽</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>/span>
  <div v-for="tab in tabs"/span> : key="標簽。 name" :href="tab.  class="px-12" :class="[tab.current || 'hidden']">/span>
  {{ tab.id }}} - {{ tab.name }}} - {{ tab.href }}} - {{tab.title }}} - {{標簽.影像源}}{標簽.影像源}}
  </div> 
<div>>

標籤：

上一篇：有無Babel的Vue專案？

下一篇：如何改變安卓應用中的默認活動？