Question

我觉得关于如何解决此问题的想法已经用完了。

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

我似乎遇到的问题是，我实际上无法从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？

Answer 1

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

data() {
  return postInfo;
}

或者如果出于某种原因您需要上高中：

data: function () {
  return postInfo;
}

在vue组件中解析输入属性

1 个答案: