Блог

Шаблон:

 <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 menu высмеиваются для примера; они извлекаются из сервиса, поэтому я ничего не говорю об этом, и я не хочу изменять их после выборки по другим причинам)

Итак, в общем, мой вопрос касается не правильной маршрутизации, а того, как вы изменяете данные v-for (в моем случае: ключ) во время выполнения, если вам нужно?

(Я думаю, я мог бы изменить строку сопоставления на

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

но я хочу сохранить state.menu, как я уже писал. Я хочу, чтобы изменения происходили во время рендеринга v-for.)

Вы пробовали использовать литерал шаблона:

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