在點擊事件中改變選定的標簽 -有解無憂

我是Vuejs的新手，我想在點擊事件中改變導航的選定標簽，我嘗試使用函式，但控制臺拋出了一個錯誤：

我是Vuejs的新手，我想在點擊事件中改變導航的選定標簽。

vue.runtime.global.js:8392 未發現型別錯誤。_ctx.changeTab不是一個函式

我想做的是，在@click事件中運行一個函式，改變選定的標簽，并根據單個段落元素中選定的標簽來顯示內容

。

代碼：

<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"/span>>
        <option v-for="tab in tabs" ：key="tab. name" :selected="tab.current">{{ tab.name }}</option> 
      </select>/span>
    </div>/span>
    <div class="hidden sm:block"/span>>
     < nav class="flex space-x-4" aria-label="Tabs" 。 class="bg-gray-600"/span>>
        < 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>/span>
</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 {
      標簽。
    }
    
     function changeTab（selectedTab）{
      let test = this.tabs.find（selectedTab.id）。
       
       console.log(test)
    }
  },
}
</script> 


<style>/span>
  nav {
    width: max-content; 
    display: flex;
    差距。20px; 
    background: #E5E5E5; 
    border-radius: 20px; 
}
</style>

我怎樣才能實作這個目標？請注意

uj5u.com熱心網友回復：

像這樣嘗試：

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

<script>。
import { ref } from 'vue'/span>
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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310002.html

標籤：

上一篇：在javascript中執行第一個.remove()條件后函式退出

下一篇：什么是Vuetifyv-menu組件的"保存"方法？