在 Vue 中使用外部 JSON 文件

Question

我正忙着为我的一个朋友建立一个网站，而他的计算机知识并不好。所以我想了个办法让他轻松一点。

我想创建一个 JSON 文件，我可以在其中保存 JSON 文件中的所有文本和图像路径，以便他可以进入文件并应用他想要的更改，而不是通过代码搜索（就像你通常做的那样) 并在那里应用更改。

我以着陆页为例。

<template>
  <div class="home">
    <div v-for="data in myJson.hero" :key="data">
      <v-card tile flat>
        <v-img
          height="885"
          gradient="to top left, rgba(100,115,201,.13), rgba(25,32,72,.7)"
          :src="data.image"
        >
          <template v-slot:placeholder>
            <v-row class="fill-height ma-0" align="center" justify="center">
              <v-progress-circular
                indeterminate
                color="grey lighten-5"
              ></v-progress-circular>
            </v-row>
          </template>
          <v-row>
            <v-col cols="12">
              <div class="centered">
                <h2 class="display-2 text-center white--text">
                  {{ data.firstHeading }}
                </h2>
                <h1
                  data-aos="zoom-in"
                  class="display-4 font-weight-bold text-center white--text"
                >
                  {{ data.secondHeading }}
                </h1>
                <h3 class="subtitle-4 text-center white--text">
                  {{ data.subHeading }}
                </h3>

                <v-btn large class="btnCentered" outlined fab dark>
                  <v-icon>mdi-arrow-down</v-icon>
                </v-btn>
              </div>
            </v-col>
          </v-row>
        </v-img>
      </v-card>
    </div>
  </div>
</template>

<script>
import json from "../json/controller.json";
export default {
  name: "Home",
  data() {
    return {
      myJson: json,
    };
  },
  components: {},
  methods: {},
};
</script>

<style scoped>
.centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btnCentered {
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

我的 JSON 文件：

{
    "hero": [{
            "name": "heroImage",
            "alt": "telescopeImage",
            "image": "@/assets/background/telescope.jpg"
        },
        {
            "firstHeading": "HeroText",
            "secondHeading": "HeroText",
            "subHeading": "telescopeImage"
        }
    ],
}

我以前做过，但是在一个 Vue.js 文件中，而不是从另一个文件中

不知怎的，我做错了......所以，如果有人能启发我的愚蠢，那就太好了。如果有人知道更好的方法，请不要保密。

编辑**

我听从了@Daniel_Knights 的建议，它起作用了，有点...只是它附带了一个不需要的功能。

着陆页重复了两次。就像一家著名的游戏公司会说它是一个惊喜机制。文本显示在第二个而不是图像...

编辑*** X2

弄清楚为什么它会重复两次。但图像仍然是个问题。

复制自己的原因是JSON文件不是这样的。

    "hero": [{
        "name": "heroImage",
        "alt": "telescopeImage",
        "image": "@/assets/background/telescope.jpg",
        "firstHeading": "HeroText",
        "secondHeading": "HeroText",
        "subHeading": "telescopeImage"

    }],

Answer 1

修好了！

@Daniel_Knights 为我指明了正确的方向，先生，谢谢您的启发。

我的问题是 JSON 文件不正确，因此它自己迭代了两次。其次，我的图像不想显示，所以我认为它与 JSON 文件中的路径有关。

我创建了一个method，在作为路径的项目之后添加了@/。

我的登陆页面

<template>
  <div class="home">
    <div v-for="data in myJson.hero" :key="data">
      <v-card tile flat>
        <v-img
          height="885"
          gradient="to top left, rgba(100,115,201,.13), rgba(25,32,72,.7)"
          :src="letterIcon(data.image)"
        >
          <template v-slot:placeholder>
            <v-row class="fill-height ma-0" align="center" justify="center">
              <v-progress-circular
                indeterminate
                color="grey lighten-5"
              ></v-progress-circular>
            </v-row>
          </template>
          <v-row>
            <v-col cols="12">
              <div class="centered">
                <h2 class="display-2 text-center white--text">
                  {{ data.firstHeading }}
                </h2>
                <h1
                  data-aos="zoom-in"
                  class="display-4 font-weight-bold text-center white--text"
                >
                  {{ data.secondHeading }}
                </h1>
                <h3 class="subtitle-4 text-center white--text">
                  {{ data.subHeading }}
                </h3>

                <v-btn large class="btnCentered" outlined fab dark>
                  <v-icon>mdi-arrow-down</v-icon>
                </v-btn>
              </div>
            </v-col>
          </v-row>
        </v-img>
      </v-card>
    </div>
  </div>
</template>

<script>
import json from "../json/controller.json";
export default {
  name: "Home",
  data() {
    return {
      myJson: json,
    };
  },
  components: {},
  methods: {
    letterIcon: function (path) {
      return require("@/" + path);
    },
  },
};
</script>

<style scoped>
.centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btnCentered {
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

我的 JSON 文件

{
    "hero": [{
        "alt": "telescopeImage",
        "image": "assets/background/telescope.jpg",
        "firstHeading": "HeroText",
        "secondHeading": "HeroText",
        "subHeading": "telescopeImage"
    }]


}