Question

我试图从目录中选择文件列表（路径）并在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>

Answer 1

您可以使用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。

如何将数组附加到来自ipcRenderer的数据中

1 个答案: