Как добавить массив в данные из ipcRenderer - PullRequest
Новая
       18

Как добавить массив в данные из ipcRenderer

0 голосов
/ 01 июня 2019

Я пытаюсь выбрать список файлов (путь) из каталога и отобразить его на DOM, но для отображения данных я должен сначала назначить в объект данных vuejs.

mainRenderer 

ipcMain.on("channel1", (e, args) => {
  const files = getFileFromUserSelection();
  e.reply("channel1", files); // sending to channel1 in app.vue
});

const getFileFromUserSelection = () => {
  const files = dialog.showOpenDialog({
    properties: ["multiSelections"]
  });
  if (!files) return;
  return files;
};

App.Vue 

<template>
  <div>
    <p v-for="file in files">{{file}}</p>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";

//this gets files from the main process 
ipcRenderer.on("channel1", (e, files) => {
  console.log(files); // i want this file into data:function()
});

export default {
  data: function() {
    return {
      files: []
    };
  },
  methods: {
    clicked: function() {
      ipcRenderer.send("channel1", "open dialog to getFiles from user");
    }
  }
};


</script>

1 Ответ

0 голосов
/ 01 июня 2019

Вы можете использовать хук beforeCreate для компонента Vue, чтобы гидратировать свойство data: 

export default {
  data: function() {
    return {
      files: []
    };
  },
  beforeCreate() {
    ipcRenderer.on("channel1", (e, files) => {
      this.files = files
    });
  },
  methods: {
    clicked: function() {
      ipcRenderer.send("channel1", "open dialog to getFiles from user");
    }
  }
};

Обратите внимание, что, конечно, вы не можете напрямую взаимодействовать с массивом файловпока вы не узнаете, что он гидратирован, так что вычисляемый геттер может вам пригодиться или просто использовать files.length.

...