Разбор входных свойств в компоненте vue - PullRequest
Новая
       7

Разбор входных свойств в компоненте vue

0 голосов
/ 23 декабря 2018

Мне кажется, что у меня заканчиваются идеи, как решить эту проблему.

Итак, у меня есть компонент, который должен читать файл и отображать некоторые данные из этого файла.Я хочу передать только имя файла компоненту, чтобы он мог обрабатывать чтение и анализ файла.Для этого я добавил свойство к компоненту.

Проблема, по-видимому, заключается в том, что я не могу получить доступ к этому свойству из функции 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?

1 Ответ

0 голосов
/ 23 декабря 2018

Не используйте функцию стрелки для функции data.Функции стрелок связывают this с любым контекстом, в котором объявлена ​​функция. Вам нужно позволить Vue правильно связать this с экземпляром, который она создает.Поэтому используйте 

data() {
  return postInfo;
}

или, если по какой-то причине вам нужно учиться в старшей школе: 

data: function () {
  return postInfo;
}
...