在点击事件上更改选定的选项卡

Posted 2023-02-16

【中文标题】在点击事件上更改选定的选项卡

【英文标题】：Change selected tab on click event

【发布时间】：2021-11-11 18:24:08

【问题描述】：

我是 Vuejs 的新手，我想在单击事件时更改选定的导航选项卡我尝试使用函数但控制台抛出错误：

vue.runtime.global.js:8392 Uncaught TypeError: _ctx.changeTab is not a 功能

CodePen

我想要做的是在@click 事件上运行一个函数来更改选定的选项卡并根据单个段落元素中的选定选项卡显示内容

代码：

<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 class="hidden sm:block">
     <nav class="flex space-x-4" aria-label="Tabs" :class="bg-gray-600">
        <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>
</template>

<script>
const tabs = [
   id: 1 , name: 'LOREM', href: '#test1', current: false ,
   id: 2, name: 'IPSUM', href: '#test2', current: false ,
   id: 3, name: 'PDF', href: '#test3', current: true ,
]
export default 
  setup() 
    return 
      tabs,
    
    
     function changeTab(selectedTab)
      let test = this.tabs.find(selectedTab.id);
       
       console.log(test)
    
  ,

</script>


<style>
  nav 
    width: max-content; 
    display: flex;
    gap: 20px; 
    background: #E5E5E5; 
    border-radius: 20px; 

</style>

我怎样才能做到这一点？问候

【参考方案1】：

试试这样：

<template>
  <div>
    <div class="hidden sm:block">
     <nav class="flex space-x-4 bg-gray-600" 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 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 
    </div>
  </div>
</template>

<script>
import  ref  from 'vue'
export default 
  setup() 
    const tabs = ref([
       id: 1 , name: 'LOREM', href: '#test1', current: false ,
       id: 2, name: 'IPSUM', href: '#test2', current: false ,
       id: 3, name: 'PDF', href: '#test3', current: true ,
    ])
    
    const  changeTab = (selectedTab) => 
      tabs.value.map(t => 
        t.id === selectedTab.id ? t.current = true : t.current = false
      );
    
    
    return  tabs, changeTab 
    
  ,

</script>

【讨论】：

它有效！，你能解释一下为什么你在标签数组上添加ref 吗？为什么 changeTab 没有声明为函数？

嘿伙计 :) 你在组合 API 中没有数据对象，所以你不能使用this。您需要从 vue 导入 ref 或 reactive 以获得反应性。如果您觉得我的回答有用，请接受（复选标记）

changeTab 被声明为箭头函数，您可以使用 function changeTab () 获得相同的结果