Импорт и анализ CSV VueJS (только интерфейс)

не могли бы вы поделиться рабочим примером разбора CSV-файла с клиента?

Я вообще не могу найти рабочий пример...

Я играл с vue-papa-parser и vue-csv-import, но могу заставить его работать :(

Вот мой файл компонента (с использованием последнего пакета):

    <template lang = "html">
     <div class = "container">
       <h1 class = "h2">CSV Upload</h1>
       <div class = "dragndrop text-muted d-flex flex-column justify-content-center align-items-center border border-secondary">
    
          <vue-csv-import
              v-model = "csv"
              :fields = "{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
          >
              <vue-csv-toggle-headers></vue-csv-toggle-headers>
              <vue-csv-errors></vue-csv-errors>
              <vue-csv-input></vue-csv-input>
              <vue-csv-map :auto-match = "false"></vue-csv-map>
          </vue-csv-import>
       </div>
     </div>
    </template>
    
    <script>
      import { VueCsvImport } from 'vue-csv-import';
    
      export default {
        name: "CSVUpload",
        components: {
          VueCsvImport
        },
        data() {
          return {
            csv: null
          }
        },
        methods: {
        }
      }
    </script>
    
    <style lang = "css" scoped>
    .dragndrop {
      background-color: #f5f5f5;
      height: 50vh;
      width: 80%;
      margin: 2.5em auto;
    }
    </style>

но в консоли получаю следующее:

[Vue warn]: Error in render: "TypeError: Cannot read property 'VueCsvImportData' of undefined"

found in

---> <VueCsvImport>
       <CallRecordUpload> at src/components/admin/Upload/Upload.vue
         <Home> at src/components/Home.vue
           <App> at src/App.vue
             <Root>

и поэтому я даже не вижу ни одного INPUT TYPE="FILE" для загрузки... что-то не так с vue-csv-import :(

Есть предположения?

Обновлено: РЕШЕНО

Мне пришлось установить более низкую версию (v4 только для vue3!)

npm install vue-csv-import@2.3.4 --save

работает для меня отлично!

спасибо @marsnebulasoup за подсказку !!

Я на самом деле сделал что-то подобное здесь. Вы можете проверить код, если хотите идей.

marsnebulasoup 18.12.2020 20:58

Я изучаю это сейчас это сейчас

Mr.P 18.12.2020 21:08

Я нашел демо, в котором используется vue-csv-import, если хотите посмотреть: codeandbox.io/s/62x8plrwnk

marsnebulasoup 18.12.2020 21:26

хорошо @marsnebulasoup ... попробую :)

Mr.P 19.12.2020 19:45

хорошо .... Теперь я знаю, в чем проблема ... когда я устанавливаю пакет, он дает мне версию ^ 4.0.1, а у них (в package.json) "vue-csv-import": "2.3.3" ... когда я пытался изменить их версию на 4.x.x не получилось... и не работает, когда пытаюсь вручную изменить версию пакета в package.json :(

Mr.P 19.12.2020 19:51

Ага. Я видел это и пытался создать песочницу с этой версией, но у меня она почему-то не работает... должно быть, они используют какую-то темную магию, чтобы нормально работать 😑

marsnebulasoup 19.12.2020 19:57

Я заставил это работать .. нужно специально установить версию 2.3.4 .... кажется, она отлично работает :) спасибо, приятель, за коды и коробку .... это помогло !!

Mr.P 19.12.2020 20:04

Без проблем. Рад, что у вас получилось!

marsnebulasoup 19.12.2020 20:10
Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
7
8
8 926
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

плохая версия .. она автоматически использует последнюю версию 4 (которая предназначена только для vue3 .. для vue2 мне пришлось использовать 2.3.4, и это сработало отлично :))

смотрите журнал изменений

yarn add vue-csv-import@2.3.4
aswzen 21.02.2021 19:48

Кажется, эта версия не может автоматически сопоставлять поля

john graham 27.04.2021 22:34

Другие вопросы по теме