数组的动态索引

Question

我是Vuejs的新手，我目前正在使用composition，所以我有一个这样的数组：

const tabs = ref([
      {
        id: 1,
        pdf: 'name1',
        ...
      },
      {
        id: 2,
        pdf: 'name2',
       ...
      },
      {
        id: 3,
        pdf: 'name3',
        ...
      },
    ])

然后我有一个像这样的div：

<div
        v-for="tab in tabs"
        :key="tab.name"
        :href="tab.href"
        class="px-12 pt-8 flex flex-col"
        :class="[tab.current || 'hidden']"
        @click="changeTab(tab)"
      >
        <div v-if="pdf != ''">
          <div class="pt-4 font-bold underline">
            <a :href="pdfSrc" target="_blank">See PDF</a>
          </div>
        </div>
      </div>

然后我使用computed来获得当前的href值，如下所示：

 props: {
    tabs: {
      type: Array as PropType<Array<any>>,
      required: true,
    },
  },



computed: {
    pdfSrc(): string {
          return `/img/modal/pdf/${encodeURIComponent(this.tabs[0].pdf)}.pdf`
        },
    }

正如你所看到的，我总是使用tabs[0]，所以pdf的值总是name1，我想根据所选的标签来获取

tab方法：

setup(props) {
  

    const changeTab = (selectedTab: { id: number }) => {
      props.tabs?.map((t) => {
        t.id === selectedTab.id ? (t.current = true) : (t.current = false)
      })
    }

    return {
      changeTab,
    }
  },

如何根据当前页签将静态索引0更改为动态索引？

Answer 1

我建议创建一个新的变量来跟踪所选的选项卡。

const selectedTabId = ref(0);

与tabs类似，它可以在数组中向下传递，并在changeTab函数中更新该值。

props: {
 tabs: {
  type: Array as PropType<Array<any>>,
  required: true,
 },
 selectedTabId: {
     type: Number
  }
},


setup(props) {

const changeTab = (selectedTab: { id: number }) => {
   selectedTabId = selectedTab.id
  props.tabs?.map((t) => {
    t.id === selectedTab.id ? (t.current = true) : (t.current = false)
  })
}

  return {
   changeTab,
  }
 },

最后在计算中使用selectedTabId

computed: {
   pdfSrc(): string {
      return `/img/modal/pdf/${encodeURIComponent(this.tabs[this.selectedTabId].pdf)}.pdf`
    },
 }