Input slots on vue-csv-input

[randy-parcel-ag]

Does anyone have an example where they are using the v-slot option of vue-csv-input?

Same question as #79, but in their case the resolution was marked as complete that they were missing the fields prop on vue-csv-import. That is not the case here.

This example works when I don't attempt use the v-slot in vue-csv-input (unformatted file input button), and fails with: "Cannot read properties of null (reading 'files')" upon selecting a file when I do.

Looking at the source, it appears this is due to csvRef being null when the code tries to get the file selected. (line 72)

Example:

 <vue-csv-import
      v-model="csv"
      :fields="{
        alias: { required: true, label: 'Name' },
        equipment_make: { required: false, label: 'Make' },
        equipment_model: { required: false, label: 'Model' },
        serial_number: { required: false, label: 'Serial / VIN' },
      }"
    >
      <vue-csv-errors></vue-csv-errors>
       <vue-csv-input v-slot="{ file, change }">
          <label>
            Step 1: Upload File
            <input type="file" @change="change" >
            {{file}}
          </label>
        </vue-csv-input>
      <vue-csv-map></vue-csv-map>
      <vue-csv-toggle-headers v-slot="{ hasHeaders, toggle }">
        <label>
          <input
            type="checkbox"
            id="hasHeaders"
            :value="hasHeaders"
            @change="toggle"
          />
          Does this CSV have column headings?
        </label>
      </vue-csv-toggle-headers>
    </vue-csv-import>

[randy-parcel-ag]

Found a solution (and likely the reason for the error). I should not have embedded the input in the
Changing to this allowed me to style the button as I needed:

<label   class="css styling of the button here"   for="fileInputButton"    >
      Step 1: Upload File
 </label>
 <vue-csv-input id="fileInputButton" class="hidden"/>

[MarcVegas]

Hey @randy-parcel-ag . I tried your solution out and it solved my styling problems but doing this makes the vue-csv-map component to fail as it does not display the fields that allow you to select column from the uploaded csv. Did you face such issue? If so, were you able to fix it?

[randy-parcel-ag]

Sorry, I won't be much help here. I ended up switching to PapaParse and writing my own UI to map the CSV data to the application. This wasn't specifically because of issues with vue-csv-input, I just needed more control in the specific case I was coding for.