时间戳

首页 > 解决方案 > 解析vue组件中的输入属性

javascript - 解析vue组件中的输入属性

问题描述

我觉得我对如何解决这个问题的想法已经不多了。

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

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

标签： javascriptvue.jsvue-component

解决方案

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

data() {
  return postInfo;
}

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

data: function () {
  return postInfo;
}

推荐阅读