javascript - 响应式选择菜单不显示数组值
问题描述
我有一个导航栏,根据选定的选项卡显示值
现在我想在移动视图中做同样的事情,为此,我有一个选择菜单而不是导航栏
但是当我选择不同的值时,值并没有改变,我做错了什么?问候
代码:
<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>
解决方案
您的<select>
标签没有绑定。通常你应该有一个v-bind
或至少一个change
处理程序来更新数据。
您的change
处理程序可能如下所示:
<select
@change="changeTab($event.target.value)"
>
...
</select>
推荐阅读
- laravel - 为什么当我使用独特的方法时我不能用 faker 创建假数据
- selenium - 如何使用 Cucumber 和 JUnit 生成 Allure 报告?
- json - 在 Angular 项目(MEAN STACK)中通过 HTTP 请求处理复杂的 json
- powershell - 如何通过在 Powershell 中保留重复的列名来合并两个 csv 文件
- laravel - 使用 Laravel Eloquent 排除空或空列
- java - 在 Android WebView 上拟合图像
- python - 7 年来每月捕获的数据的最佳数据结构 - 列表数组?
- amazon-web-services - MERN 堆栈应用程序部署到 AWS EC2 实例
- gnuplot - gnuplot - 从与脚本在同一文件中的一个数据集中打印多个图
- angular - Angular ts datepipe 错误“invalidPipeArgument:'无法将“03:45:00”转换为日期'”