vue.js - Vue - v-for 修改值

Question

模板:

<template>
  <nav>
    <router-link :to="key" v-for="(value, key) in state.menu" :key="key">{{value}} | </router-link>
  </nav>
</template>

代码:

export default {
  setup() {

    const menu = ['home', 'news', 'about'];

    const state = reactive({
      menu: {}
    }); 

    menu.map(item => {
      state.menu[item] = Common.locs[item];
    });

    return {
      Common,
      state,        
    }

  }
}

我要更新

:to="key" 

通过一些过滤器或函数运行它来修改它以添加前缀“/other/”，而不是呈现

<a href="/home" ...>

我会

<a href="/other/home" ... >

(当然，const 菜单值是为了示例而模拟的；这些值是从服务中获取的，所以我对此无话可说，我不想在获取后出于其他原因修改它们)
所以总的来说，我的问题不是关于正确路由，而是 如果您需要 ，您如何在运行时修改 v-for 数据(在我的情况下:键) ?
(我想我可以将映射行修改为

state.menu["/other/" + item] = Common.locs[item];

但我想在我写的时候保留 state.menu。我希望在 v-for 渲染期间发生变化。)

Answer 1

您是否尝试过模板文字:

<template>
  <nav>
    <router-link :to="`/other/${key}`" v-for="(value, key) in state.menu" :key="key">{{value}} | </router-link>
  </nav>
</template>