Vue3 and pywebview implementation to get the absolute path of the local folder

<template>
  <div>
    <button @click="selectFolder">Select a folder</button>
    <button @click="showFolder">Show folders</button>
    <p>{{ folderPath }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      folderPath: ''
    };
  },
  methods: {
    selectFolder() {
      .open_folder_dialog().then(path => {
         = path;
        ();
      });
    },
    showFolder() {
      .show_folder_dialog().then(path => {
         = path['path_back'];
        ();
      });
    }
  }
};
</script>

import webview

class Api:
    def open_folder_dialog(self, window):
    	"""
    	 This function is useless. For testing purposes, the parameter of the function was window, and the parameter passed in the front end was not window, so the function was invalid
    	 """
        folder_path = window.create_file_dialog(webview.FOLDER_DIALOG)
        print(folder_path)
        folder_path_str = str(folder_path)
        print(folder_path_str, type(folder_path_str))

    def show_folder_dialog(self):
        folder_path = root_path

        response = {"path_back": folder_path}

        return response

def open_folder_dialog(window):
    global root_path
    folder_path = window.create_file_dialog(webview.FOLDER_DIALOG)
    print(folder_path, type(folder_path))
    root_path = str(folder_path[0])
    print(root_path, type(root_path))


if __name__ == '__main__':
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/', js_api=api)
    # (api.show_folder_dialog, window, debug=True)
    (open_folder_dialog, window, debug=True)

class Api:
    def greet(self, test_text):
        print(test_text)
        return f"hello, {test_text}"


if __name__ == '__main__':
    # Front-end communication test    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/', js_api=api)   # vue's build file path    (debug=True)

<template>
  <div >
    <h1>Greeting Test</h1>
    <button @click="greet">Greet</button>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: ''
    };
  },
  methods: {
    greet() {
      // Call backend API      if () {
        ('Socket test').then(response => {
           = response;
          ();
        });
      }
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>