setOptions in page will affect other page！

[bookyo]

page a:

// Import Vue FilePond
import vueFilePond, { setOptions } from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
// Import the plugin code
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
// Import the plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import gql from "graphql-tag";
let publicUrl;
setOptions({
  server: {
    // Called for each file upload
    process: (fieldName, file, metadata, load, error, progress, abort) => {
      // Your custom processing method here
      // fieldName is the name of the input field
      // file is the actual file object to send
      const createImage = `mutation createImage($file: Upload!) {
        createImage(data: { file: $file }) {
          id
          file {
            id
            publicUrl
          }
        }
      }`;
      let operation = {
        query: createImage,
        variables: {
          file: null
        }
      };
      let map = {
        "0": ['variables.file']
      }
      let formData = new FormData();
      formData.append('operations', JSON.stringify(operation));
      formData.append('map', JSON.stringify(map));
      formData.append(0, file);
      axios({
        method: "POST",
        url: "/admin/api",
        data: formData,
        onUploadProgress: function (e) {
          progress(e.lengthComputable, e.loaded, e.total);
        },
      })
        .then(function (res) {
          const data = res.data;
          publicUrl = data.data.createImage.file.publicUrl;
          load(data.data.createImage.id);
        })
        .catch(function (err) {
          error("oh no");
        });

      // Should expose an abort method so the request can be cancelled
      return {
        abort: () => {
          // This function is entered if the user has tapped the cancel button
          request.abort();

          // Let FilePond know the request has been cancelled
          abort();
        },
      };
    },
  },
});
// Create component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
);
export default{
...
}

page b:

setOptions({
});
export default{
...
}

page a setOptions will be global setting, and page b will default use page a setOptions function. this will cause something wrong when i have a lot of different settings on different pages.

i have sovle it use setOptions in mouted() on different pages.

[rikschennink]

setOptions is global, you need to set properties on the component if you want to have different options per view.

[bookyo]

setOptions is global, you need to set properties on the component if you want to have different options per view.

i can use itemInsertLocation in setOptions?