我觉得我对如何解决此问题的想法已经用尽。

因此,我有一个应该读取文件并显示该文件中某些数据的组件。我只想将文件名传递给组件,以便它可以处理读取和解析文件。为此,我向组件添加了一个属性。

我似乎遇到的问题是,我实际上无法从data函数访问该属性,并且如果在该属性上添加了监视程序,则可以按预期解析该文件,但似乎无法获取该数据进入DOM。

这就是我现在所拥有的:

<template>
  <main :key="fileName">
    fileName: {{fileName}}
    <div class="post">{{data}}</div>
    <div class="info">
      <div v-for="item in info" v-bind:key="item.name">{{item.name}}</div>
    </div>
  </main>
</template>

<script>
const { parse } = require("@/service/parser");
const fs = require("fs");
let postInfo = { data: "abc", info: [] };
export default {
  props: ["fileName"],
  watch: {
    fileName: {
      immediate: true,
      handler: (newVal, oldVal) => {
        if (newVal) {
          postInfo = parse(
            fs
              .readFileSync(__dirname + "/../../assets/" + newVal, "utf8")
              .split("\n")
          );
        }
      }
    }
  },
  data: () => {
    return postInfo;
  }
};
</script>


我显然对Vue完全陌生,在这里我可能缺少一些愚蠢的东西。

那么,我在做什么错呢?如何将解析后的数据放入DOM?

最佳答案

不要在data函数中使用箭头功能。箭头函数将this绑定到在其中声明该函数的任何上下文。您需要让Vue正确地将this绑定到正在创建的实例。所以用

data() {
  return postInfo;
}


或由于某种原因而需要上旧学校:

data: function () {
  return postInfo;
}

09-11 07:47
查看更多