E
E
Elbakidze2019-04-26 13:17:21
Vue.js
Elbakidze, 2019-04-26 13:17:21

Why is the script not showing up?

Hello everyone, I will describe my actions step by step:
1) Installed laravel
2) Entered npm install on the command line
3) Created the ImageUpload.vue component

<template>
    <div class="container">
        <div class="progress" style="height: 40px">
            <div class="progress-bar" role="progressbar" :style="{width:fileProgress + '%' }">
                {{ fileCurrent }}%
            </div>
        </div>
        <hr>
        <input type="file" name="image" multiple="" @change="fileInputChange">
        <hr>
        <div class="row">
            <div class="col-sm-6">
                <h3 class="text-center">Файлы в очереди ({{ files0rder.length }})</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="file in files0rder">
                        {{ file.name }} : {{ file.type }}
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="col-sm-6">
                <h3 class="text-center">Загруженные файлы ({{ fileFinish.length }})</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="file in fileFinish">
                        {{ file.name }} : {{ file.type }}
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                files0rder: [],
                fileFinish:[],
                fileProgress:0,
                fileCurrent:''
            }
        },
        methods:{
            async fileInputChange(){
                let files = Array.from(event.target.files);
                this.files0rder = files.slice();
                for (let item of files){

                    await this.uploadFile(item);

                }
            },
            async uploadFile(item) {
                let form = new FormData();
                form.append('image', item);

                await axios.post('/image/upload', form, {
                    onUploadProgress:(itemUpload) => {
                        this.fileProgress = Math.round( (itemUpload.loaded / itemUpload.total) * 100);
                        this.fileCurrent = item.name + ' ' + this.fileProgress;
                    }
                }
            )
                .then(response => {
                    this.fileprogress = 0;
                    this.fileCurrent = '';
                    this.fileFinish.push(item);
                    this.files0rder.splice(item, 1);
                })
                    .catch(error => {
                        console.log(error);
                    })
            }
        }
    }
</script>

4) Added route to app.js
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('image-upload', require('./components/ImageUpload.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app'
});

5) Added a script display tag to the main page
<div id="app" class="input-group mb-4">
                        <h4>Добавить фото</h4>
                        <image-uoload></image-uoload>
                    </div>

6) At the command line I typed npm run dev
But for some reason the script is not displayed on the main page, what is the reason please tell me?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question