如何將對象鍵/值對傳遞給 Vue 中的模板？

Question

這是我目前所擁有的——除了鏈接指向 http://localhost:5173/[object%20Object] 之外，一切正常，我想我遇到了心理障礙。

我使用的代碼：

<template lang="pug">

.nav-container
  .nav-controller
    ul.navbar-nav
      li.btn(v-for="(value, key) in myObject" :key="value")
        a.nav-link.nav-item(type='button' :href='{value}') {{key}}
</template>

<script>
const sections = {
  Home: "/",
  Programming: "/programming",
  Finance: "/finance",
};

export default {
  name: "NavBar",
  data() {
    return {
      myObject: sections,
    };
  },
};

我意識到它可以縮小和簡化，但那是我項目的當前狀態，基於反復試驗以了解事情是如何工作的，而不是最終的。

Answer 1

我什至不知道我做了什么——但基本上是在普通的 HTML 中弄亂它，然后通過網站生成器將它轉換成哈巴狗；

<template lang="pug">
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' integrity='sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65' crossorigin='anonymous')
.nav-container
  .nav-controller
    ul.navbar.nav
      li.btn(v-for='(value, key) in myObject')
        a.nav-link.nav-item(type='button' :href='value') {{ key }}
</template>

有用...