解析vue组件中的输入属性答案

【问题标题】：Parsing input properties in a vue component解析vue组件中的输入属性
【发布时间】：2019-05-23 00:56:02
【问题描述】：

我觉得我没有办法解决这个问题。

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

我似乎遇到的问题是我无法真正从 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 中？

【问题讨论】：

您正在为（Vue 外部的）变量postInfo 而不是this.postInfo 分配一个新值。你应该能够在你的data函数中使用this.fileName。
这是让我很困惑的一件事。我读过很多帖子，人们在他们的数据函数中使用this.whatever。对我来说this 是未定义的（天知道为什么），所以如果我运行console.log(this.fileName) 那么我会得到一个错误，说我无法从undefined 读取fileName

标签： javascript vue.js vue-component

【解决方案1】：

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

data() {
  return postInfo;
}

或者如果由于某种原因你需要成为老派：

data: function () {
  return postInfo;
}

【讨论】：