prashant.godhwani

Experience

1,180

0 Best Reply Awards

  • Member Since 1 Week Ago
  • 10 Lessons Completed
  • 0 Favorites

12th October, 2017

prashant.godhwani left a reply on Uncaught TypeError: Cannot Read Property 'post' Of Undefined • 6 days ago

Hey, I am having the same error over here `

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload Video</div>

                    <div class="panel-body">
                        <input type="file" name="video" id="video" @change="fileInputChange" v-if="!uploading">
                        <div id="video-form" v-if="uploading && !failed">
                            form

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                uploading:false,
                uploadingComplete:false,
                failed:false,
                title:'untitled',
                description:null,
                visibility:'private',
            }
        },
        methods:{
            fileInputChange(){
                this.uploading = true;
                this.failed = false;
                this.file=document.getElementById('video').files[0];
                this.store().then(()=>{
                    //upload the video
                })
            },
            store(){
                return this.$http.post('/videos', {
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility,
                    extension: this.file.name.split('.').pop()
                }).then((response)=>{
                    console.log(response.json());
                });
            }
        },
        mounted() {

        }
    }
</script>

`

Please help me ! :)

11th October, 2017

prashant.godhwani started a new conversation Error In Creating A Http Request In Vue • 1 week ago

I receive the following errors in the console when I try to create an ajax HTTP request using Vue. I am new to Vue so please help me. I am using the HTTP post to go to a route using post which in turn calls a controller store function.

the error in console log is this

new.vue?79f8:48 Uncaught TypeError: Cannot read property 'post' of undefined
    at VueComponent.store (eval at <anonymous> (app.js:93), <anonymous>:48:31)
    at VueComponent.boundFn [as store] (eval at <anonymous> (app.js:86), <anonymous>:182:12)
    at VueComponent.fileInputChange (eval at <anonymous> (app.js:93), <anonymous>:43:18)
    at boundFn (eval at <anonymous> (app.js:86), <anonymous>:181:14)
    at HTMLInputElement.invoker (eval at <anonymous> (app.js:86), <anonymous>:1823:18)

my new.vue is this. I call the http post here

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload Video</div>

                    <div class="panel-body">
                        <input type="file" name="video" id="video" @change="fileInputChange" v-if="!uploading">
                        <div id="video-form" v-if="uploading && !failed">
                            form

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                uploading:false,
                uploadingComplete:false,
                failed:false,
                title:'untitled',
                description:null,
                visibility:'private',
            }
        },
        methods:{
            fileInputChange(){
                this.uploading = true;
                this.failed = false;
                this.file=document.getElementById('video').files[0];
                this.store().then(()=>{
                    //upload the video
                })
            },
            store(){
                return this.$http.post('/video', {
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility,
                    extension: this.file.name.split('.').pop()
                }).then((response)=>{
                    console.log(response.json());
                });
            }
        },
        mounted() {

        }
    }
</script>

and my app.js is

//
    // /**
    //  * 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');
    //
    // /**
    //  * 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.
    //  */
    //
    //  Vue.component('video-upload', require('./components/new.vue'));
    //
    // const app = new Vue({
    //     el: '#app',
    // });

    import Vue from 'vue'
    import New from './components/new.vue'
    import VueResource from 'vue-resource'



   // Vue.component('video-upload', require('./components/new.vue'));

    Vue.use(VueResource);

    new Vue({
        render(h) {
            return h(New)
        }
    }).$mount('#video-upload')

10th October, 2017

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

after removing the packages and running npm install. I receive the following errors while running gulp

E:\xampp\htdocs\viewflix>gulp
module.js:471
    throw err;
    ^

Error: Cannot find module 'laravel-elixir'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (E:\xampp\htdocs\viewflix\gulpfile.js:1:78)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

after removing the packages and running npm install. I receive the following errors while running gulp ' ' ' E:\xampp\htdocs\viewflix>gulp module.js:471 throw err; ^

Error: Cannot find module 'laravel-elixir' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (E:\xampp\htdocs\viewflix\gulpfile.js:1:78) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) ' ' '

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

@tykus should I remove all these?

"laravel-elixir": "^6.0.0-16",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

@tykus I even added 'vue$': 'vue/dist/vue.common.js' to WebpackConfig.js

let webpack = require('webpack');

let webpackDefaultConfig = require('./webpack-default');
let webpackEntry = require('./webpack-entry');
let webpackRules = require('./webpack-rules');
let webpackPlugins = require('./webpack-plugins');

process.noDeprecation = true;

class WebpackConfig {
    /**
     * Create a new instance.
     */
    constructor() {
        this.webpackConfig = webpackDefaultConfig();
    }


    /**
     * Build the Webpack configuration object.
     */
    build() {
        this.buildEntry()
            .buildOutput()
            .buildRules()
            .buildPlugins()
            .buildResolving()
            .mergeCustomConfig();

        Mix.dispatch('configReady', this.webpackConfig);

        return this.webpackConfig;
    }


    /**
     * Build the entry object.
     */
    buildEntry() {
        let { entry, extractions } = webpackEntry();

        this.webpackConfig.entry = entry;

        // If we're extracting any vendor libraries, then we
        // need to add the CommonChunksPlugin to strip out
        // all relevant code into its own file.
        if (extractions.length) {
            this.webpackConfig.plugins.push(
                new webpack.optimize.CommonsChunkPlugin({
                    names: extractions,
                    minChunks: Infinity
                })
            );
        }

        return this;
    }


    /**
     * Build the output object.
     */
    buildOutput() {
         let http = process.argv.includes('--https') ? 'https' : 'http';

        this.webpackConfig.output = {
            path: path.resolve(Mix.isUsing('hmr') ? '/' : Config.publicPath),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: Mix.isUsing('hmr') ? (http + '://localhost:8080/') : ''
        };

        return this;
    }


    /**
     * Build the rules array.
     */
    buildRules() {
        let { rules, extractPlugins } = webpackRules();

        this.webpackConfig.module.rules = this.webpackConfig.module.rules.concat(rules);
        this.webpackConfig.plugins = this.webpackConfig.plugins.concat(extractPlugins);

        return this;
    }


    /**
     * Build the plugins array.
     */
    buildPlugins() {
        this.webpackConfig.plugins = this.webpackConfig.plugins.concat(
            webpackPlugins()
        );

        return this;
    }


    /**
     * Build the resolve object.
     */
    buildResolving() {
        let extensions = ['*', '.js', '.jsx', '.vue'];
        
        let buildFile = 'vue/dist/vue.common.js';

        if (Config.typeScript) {
            extensions.push('.ts', '.tsx');
            
            buildFile = 'vue/dist/vue.esm.js';
        }

        this.webpackConfig.resolve = {
            extensions,

            alias: {
                'vue$': buildFile,
                'vue$': 'vue/dist/vue.common.js'
            }
        };

        return this;
    }


    /**
     * Merge the user's custom Webpack configuration.
     */
    mergeCustomConfig() {
        if (Config.webpackConfig) {
            this.webpackConfig = require('webpack-merge').smart(
                this.webpackConfig, Config.webpackConfig
            );
        }
    }
}

module.exports = WebpackConfig;

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

is there a way to download a fresh installation of standalone version? I am new and I don't know much

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

@tykus I even formatted the question. Now I guess, its fine.

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload</div>

                    <div class="panel-body">
                       ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

yes this is my VideoUpload.vue. It is enclosed in

Upload

                <div class="panel-body">
                   ...
                </div>
            </div>
        </div>
    </div>
</div>

export default {
    mounted() {
        console.log('Component mounted.')
    }
}

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

@tykus yes this is my VideoUpload.vue

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Upload</div>

                <div class="panel-body">
                   ...
                </div>
            </div>
        </div>
    </div>
</div>

export default {
    mounted() {
        console.log('Component mounted.')
    }
}

prashant.godhwani left a reply on Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

@tykus yes, this is my VideoUpload.vue

Upload

                <div class="panel-body">
                   ...
                </div>
            </div>
        </div>
    </div>
</div>

export default {
    mounted() {
        console.log('Component mounted.')
    }
}

prashant.godhwani started a new conversation Vue.common.js?e881:478 [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined • 1 week ago

I get the following error on the console while trying to load a template using Vue on laravel. I don't know whats wrong as I am a total beginner. I tried all the solutions available but nothing seems to resolve. I want to load the VideoUpload.vue on the upload.blade.php that is under an "app" div. Kindly Help !!

The error

vue.common.js?e881:478 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VideoUpload>
       <Root>

VideoUpload.vue

Upload

                <div class="panel-body">
                   ...
                </div>
            </div>
        </div>
    </div>
</div>

export default {
    mounted() {
        console.log('Component mounted.')
    }
}

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');

/**

  • 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. */

Vue.component('video-upload', require('./components/VideoUpload.vue'));

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

package.json

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "n

pm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    "laravel-elixir": "^6.0.0-16",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "laravel-mix": "^1.5.0",
    "lodash": "^4.17.4",
    "vue": "^2.4.4",
    "vue-resource": "^0.9.3"
  }
}
Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.