Question

我正在制作一个页面的网站。我是Vue的新手，对此我感到很困惑。我还没有后端服务器，所以我在json文件中写了一些数据以便在不同的组件上显示。 json文件被命名为雇员ID，例如12231.json。我应该在哪里放置代码以加载这些json数据？以及每个组件如何获取数据？

我有一个headerNav.vue组件，该组件显示在每个页面上。我应该在这里放置代码吗？

headerNav.vue

<template>
  <div class="headermuseui">
    <mu-appbar style="width: 100%;" color="#00BCD4">
      <mu-button icon slot="left" @click="open = !open">
        <mu-icon value="menu"></mu-icon>
      </mu-button>HOME
      <div></div>
      <mu-button flat slot="right" v-on:click="switchPage('messages')">
        <mu-icon value="search"></mu-icon>
      </mu-button>
      <mu-button flat slot="right" v-on:click="switchPage('expense')">
        <mu-icon value="search"></mu-icon>
      </mu-button>
      <mu-button flat slot="right" v-on:click="getJsonFile('12231')">
        <mu-icon value="search"></mu-icon>
      </mu-button>
    </mu-appbar>

    <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
      <div>
        <div class="x">
          <img class="y mdui-img-circle" src="..\assets\picture\nuuneoi.png">
        </div>
        <img height="160px" src="..\assets\picture\nav_header_bg.jpg">
      </div>
      <mu-list>

        <mu-divider/>
        <router-link :to="{'name':'index'}">
          <mu-list-item button :ripple="false">
            <mu-list-item-action title="Home">
              <mu-icon value="home"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Home</mu-list-item-title>
          </mu-list-item>
        </router-link>
        <router-link :to="{'name':'login'}">
          <mu-list-item button :ripple="false">
            <mu-list-item-action title="Message">
              <mu-icon value="message"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Message</mu-list-item-title>
          </mu-list-item>
        </router-link>
        <router-link :to="{'name':'login'}">
          <mu-list-item button :ripple="false">
            <mu-list-item-action title="Record">
              <mu-icon value="event_note"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Record</mu-list-item-title>
          </mu-list-item>
        </router-link>
        <router-link :to="{'name':'login'}">
          <mu-list-item button :ripple="false">
            <mu-list-item-action title="setting">
              <mu-icon value="settings"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Settings</mu-list-item-title>
          </mu-list-item>
        </router-link>
      </mu-list>
    </mu-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      docked: false,
      open: false,
      position: "left",
      userinfo: {},
      // jsonFile: currentJsonFile
    };
  },
  methods: {
    switchPage(pageName) {
      this.$emit("switchPage", pageName);
    },
    // var employeeId = 12231;
    getJsonFile(employeeId) {
      this.currentJsonFile = require("../assets/json/" + employeeId + ".json");
    }
  }
};
</script>
<style type="text/css">

</style>

headerNav与上面相同。如果我包含这一行“ // jsonFile：currentJsonFile”，则导航抽屉（mu-drawer）将不会打开，并且将显示错误...像“属性或方法“打开”未在实例上定义但在渲染期间被引用通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的，请参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。 “

如何在Vue中从json加载数据并在组件中显示这些数据？

0 个答案: