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 数据（在我的例子中是：key） ?

（我想我可以将映射线修改为

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>

Vue - v-for 修改值

Vue - v-for with modifying values

vue.js

vuejs3

v-for

vue-composition-api