prashant.godhwani

Experience

1,330

0 Best Reply Awards

  • Member Since 4 Months Ago
  • 11 Lessons Completed
  • 0 Favorites

31st January, 2018

prashant.godhwani started a new conversation Algolia Facets Automatically Hiding Products • 3 weeks ago

I am new to algolia, vue and laravel. I am trying to build an e-commerce where I have used facets for filtering down data. The problem here is, whenever I check a specific filter, a certain product hides when I hover over the item before. I don't know what is creating the problem. Please help me. 6 products here. But if I select a filter and then hover on the last item in the previous row then

On hovering the last item, a item hides

This is my store.blade.php

@extends('layouts.search')

@section('content') @include('layouts.app') @stop

@section('scripts')

@endsection

This is my app.blade.php

<div class="top-bar">
    <div class="container">
        <nav>
            <ul id="menu-top-bar-left" class="nav nav-inline pull-left animate-dropdown flip">
                <li class="menu-item animate-dropdown"><a title="Welcome to Worldwide Electronics Store" href="#">Welcome to Worldwide Electronics Store</a></li>
            </ul>
        </nav>

        <nav>
            <ul id="menu-top-bar-right" class="nav nav-inline pull-right animate-dropdown flip">
                <li class="menu-item animate-dropdown"><a title="Store Locator" href="#"><i class="ec ec-map-pointer"></i>Store Locator</a></li>
                <li class="menu-item animate-dropdown"><a title="Track Your Order" href="track-your-order.html"><i class="ec ec-transport"></i>Track Your Order</a></li>
                @if (!Auth::guest())
                    <li class="menu-item animate-dropdown"><a title="My Account" href="{{ route('account') }}"><i class="ec ec-user"></i>My Account</a></li>
                    <li class="menu-item animate-dropdown"><a title="Sign Out" href="{{ route('logout') }}"
                                                              onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();" style=" font-size: 15px; color:rgb(214, 38, 38)">
                            <i class="fa fa-power-off"></i> <b>Sign Out</b>
                        </a>

                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            {{ csrf_field() }}
                        </form></li>
                @endif
            </ul>
        </nav>
    </div>
</div><!-- /.top-bar -->

<header id="masthead" class="site-header header-v2">
    <div class="container">
        <div class="row">

            <!-- ============================================================= Header Logo ============================================================= -->
            <div class="header-logo">
                <a href="home.html" class="header-logo-link">
                    <svg version="1.1" x="0px" y="0px" width="175.748px"
                         height="42.52px" viewBox="0 0 175.748 42.52" enable-background="new 0 0 175.748 42.52">
                        <ellipse class="ellipse-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#FDD700" cx="170.05" cy="36.341" rx="5.32" ry="5.367"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" fill="#333E48" d="M30.514,0.71c-0.034,0.003-0.066,0.008-0.056,0.056
        C30.263,0.995,29.876,1.181,29.79,1.5c-0.148,0.548,0,1.568,0,2.427v36.459c0.265,0.221,0.506,0.465,0.725,0.734h6.187
        c0.2-0.25,0.423-0.477,0.669-0.678V1.387C37.124,1.185,36.9,0.959,36.701,0.71H30.514z M117.517,12.731
        c-0.232-0.189-0.439-0.64-0.781-0.734c-0.754-0.209-2.039,0-3.121,0h-3.176V4.435c-0.232-0.189-0.439-0.639-0.781-0.733
        c-0.719-0.2-1.969,0-3.01,0h-3.01c-0.238,0.273-0.625,0.431-0.725,0.847c-0.203,0.852,0,2.399,0,3.725
        c0,1.393,0.045,2.748-0.055,3.725h-6.41c-0.184,0.237-0.629,0.434-0.725,0.791c-0.178,0.654,0,1.813,0,2.765v2.766
        c0.232,0.188,0.439,0.64,0.779,0.733c0.777,0.216,2.109,0,3.234,0c1.154,0,2.291-0.045,3.176,0.057v21.277
        c0.232,0.189,0.439,0.639,0.781,0.734c0.719,0.199,1.969,0,3.01,0h3.01c1.008-0.451,0.725-1.889,0.725-3.443
        c-0.002-6.164-0.047-12.867,0.055-18.625h6.299c0.182-0.236,0.627-0.434,0.725-0.79c0.176-0.653,0-1.813,0-2.765V12.731z
        M135.851,18.262c0.201-0.746,0-2.029,0-3.104v-3.104c-0.287-0.245-0.434-0.637-0.781-0.733c-0.824-0.229-1.992-0.044-2.898,0
        c-2.158,0.104-4.506,0.675-5.74,1.411c-0.146-0.362-0.451-0.853-0.893-0.96c-0.693-0.169-1.859,0-2.842,0h-2.842
        c-0.258,0.319-0.625,0.42-0.725,0.79c-0.223,0.82,0,2.338,0,3.443c0,8.109-0.002,16.635,0,24.381
        c0.232,0.189,0.439,0.639,0.779,0.734c0.707,0.195,1.93,0,2.955,0h3.01c0.918-0.463,0.725-1.352,0.725-2.822V36.21
        c-0.002-3.902-0.242-9.117,0-12.473c0.297-4.142,3.836-4.877,8.527-4.686C135.312,18.816,135.757,18.606,135.851,18.262z
        M14.796,11.376c-5.472,0.262-9.443,3.178-11.76,7.056c-2.435,4.075-2.789,10.62-0.501,15.126c2.043,4.023,5.91,7.115,10.701,7.9
        c6.051,0.992,10.992-1.219,14.324-3.838c-0.687-1.1-1.419-2.664-2.118-3.951c-0.398-0.734-0.652-1.486-1.616-1.467
        c-1.942,0.787-4.272,2.262-7.134,2.145c-3.791-0.154-6.659-1.842-7.524-4.91h19.452c0.146-2.793,0.22-5.338-0.279-7.563
        C26.961,15.728,22.503,11.008,14.796,11.376z M9,23.284c0.921-2.508,3.033-4.514,6.298-4.627c3.083-0.107,4.994,1.976,5.685,4.627
        C17.119,23.38,12.865,23.38,9,23.284z M52.418,11.376c-5.551,0.266-9.395,3.142-11.76,7.056
        c-2.476,4.097-2.829,10.493-0.557,15.069c1.997,4.021,5.895,7.156,10.646,7.957c6.068,1.023,11-1.227,14.379-3.781
        c-0.479-0.896-0.875-1.742-1.393-2.709c-0.312-0.582-1.024-2.234-1.561-2.539c-0.912-0.52-1.428,0.135-2.23,0.508
        c-0.564,0.262-1.223,0.523-1.672,0.676c-4.768,1.621-10.372,0.268-11.537-4.176h19.451c0.668-5.443-0.419-9.953-2.73-13.037
        C61.197,13.388,57.774,11.12,52.418,11.376z M46.622,23.343c0.708-2.553,3.161-4.578,6.242-4.686
        c3.08-0.107,5.08,1.953,5.686,4.686H46.622z M160.371,15.497c-2.455-2.453-6.143-4.291-10.869-4.064
        c-2.268,0.109-4.297,0.65-6.02,1.524c-1.719,0.873-3.092,1.957-4.234,3.217c-2.287,2.519-4.164,6.004-3.902,11.007
        c0.248,4.736,1.979,7.813,4.627,10.326c2.568,2.439,6.148,4.254,10.867,4.064c4.457-0.18,7.889-2.115,10.199-4.684
        c2.469-2.746,4.012-5.971,3.959-11.063C164.949,21.134,162.732,17.854,160.371,15.497z M149.558,33.952
        c-3.246-0.221-5.701-2.615-6.41-5.418c-0.174-0.689-0.26-1.25-0.4-2.166c-0.035-0.234,0.072-0.523-0.045-0.77
        c0.682-3.698,2.912-6.257,6.799-6.547c2.543-0.189,4.258,0.735,5.52,1.863c1.322,1.182,2.303,2.715,2.451,4.967
        C157.789,30.669,154.185,34.267,149.558,33.952z M88.812,29.55c-1.232,2.363-2.9,4.307-6.13,4.402
        c-4.729,0.141-8.038-3.16-8.025-7.563c0.004-1.412,0.324-2.65,0.947-3.726c1.197-2.061,3.507-3.688,6.633-3.612
        c3.222,0.079,4.966,1.708,6.632,3.668c1.328-1.059,2.529-1.948,3.9-2.99c0.416-0.315,1.076-0.688,1.227-1.072
        c0.404-1.031-0.365-1.502-0.891-2.088c-2.543-2.835-6.66-5.377-11.704-5.137c-6.02,0.288-10.218,3.697-12.484,7.846
        c-1.293,2.365-1.951,5.158-1.729,8.408c0.209,3.053,1.191,5.496,2.619,7.508c2.842,4.004,7.385,6.973,13.656,6.377
        c5.976-0.568,9.574-3.936,11.816-8.354c-0.141-0.271-0.221-0.604-0.336-0.902C92.929,31.364,90.843,30.485,88.812,29.55z"/>
                    </svg>
                </a>
            </div>
            <!-- ============================================================= Header Logo : End============================================================= -->

            <div class="primary-nav animate-dropdown">
                <div class="clearfix">
                    <button class="navbar-toggler hidden-sm-up pull-right flip" type="button" data-toggle="collapse" data-target="#default-header">
                        &#9776;
                    </button>
                </div>

                <div class="collapse navbar-toggleable-xs" id="default-header">
                    <nav>
                        <ul id="menu-main-menu" class="nav nav-inline yamm">
                            <li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Home" href="shop.html" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Home</a>

                            </li>
                            <li class="menu-item animate-dropdown"><a title="About Us" href="about.html">About Us</a></li>

                            <li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Blog" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blog</a>

                            </li>
                            <li class="yamm-fw menu-item menu-item-has-children animate-dropdown dropdown">
                                <a title="Pages" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Pages</a>

                            </li>
                            <li class="menu-item"><a title="Features" href="#">Features</a></li>
                            <li class="menu-item"><a title="Contact Us" href="#">Contact Us</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <div class="header-support-info" style="
margin-top: 1%;

">

                <div class="media">
                    <span class="media-left support-icon media-middle" style="margin-right:0px;"></span>
                    <div class="media-body">
                        @if (Auth::guest())
                            <div class="top-right links">
                                <a href="{{ route('login') }}" style="font-size: 16px; color:#a3d133"><b>Login</b></a> &nbsp; &nbsp;
                                <a href="{{ route('register') }}" style="font-size: 16px; color:#a3d133"><b>Register</b></a>
                            </div>
                        @else

                            <a href="#" class="nav-link" data-toggle="dropdown" role="button" aria-expanded="false" style="font-size: 16px; color:#a3d133">
                                <b>{{ucwords(Auth::user()->name) }} </b>
                            </a>

                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /.row -->

  •             <a class="nav-link"  href="#"  >Shop by Department</a>
    
            </li>
        </ul>
    
    
        <div class="navbar-search">
        <div class="input-group">
            <ais-search-box>
                    <ais-input
                            placeholder="Search product by name or reference..."
                            :class-names="{
                'ais-input': 'form-control navbar-search search-field',
                }"
                    ></ais-input>
    
            </ais-search-box>
            <div class="input-group-addon search-categories">
                <select name='product_cat' id='product_cat' class='postform resizeselect' >
                    <option value='0' selected='selected'>All Categories</option>
                    <option class="level-0" value="laptops-laptops-computers">Laptops</option>
                    <option class="level-0" value="ultrabooks-laptops-computers">Ultrabooks</option>
                    <option class="level-0" value="mac-computers-laptops">Mac Computers</option>
                    <option class="level-0" value="all-in-one-laptops-computers">All in One</option>
                    <option class="level-0" value="servers">Servers</option>
                    <option class="level-0" value="peripherals">Peripherals</option>
                    <option class="level-0" value="gaming-laptops-computers">Gaming</option>
                    <option class="level-0" value="accessories-laptops-computers">Accessories</option>
                    <option class="level-0" value="audio-speakers">Audio Speakers</option>
                    <option class="level-0" value="headphones">Headphones</option>
                    <option class="level-0" value="computer-cases">Computer Cases</option>
                    <option class="level-0" value="printers">Printers</option>
                    <option class="level-0" value="cameras">Cameras</option>
                    <option class="level-0" value="smartphones">Smartphones</option>
                    <option class="level-0" value="game-consoles">Game Consoles</option>
                    <option class="level-0" value="power-banks">Power Banks</option>
                    <option class="level-0" value="smartwatches">Smartwatches</option>
                    <option class="level-0" value="chargers">Chargers</option>
                    <option class="level-0" value="cases">Cases</option>
                    <option class="level-0" value="headphone-accessories">Headphone Accessories</option>
                    <option class="level-0" value="headphone-cases">Headphone Cases</option>
                    <option class="level-0" value="tablets">Tablets</option>
                    <option class="level-0" value="tvs">TVs</option>
                    <option class="level-0" value="wearables">Wearables</option>
                    <option class="level-0" value="pendrives">Pendrives</option>
                </select>
            </div>
            <div class="input-group-btn">
                <button class="btn btn-secondary" type="submit">
                    <i class="ec ec-search"></i>
                </button>
            </div>
        </div>
        </div>
        <ul class="navbar-mini-cart navbar-nav animate-dropdown nav pull-right flip">
            <li class="nav-item dropdown">
                <a href="cart.html" class="nav-link" data-toggle="dropdown">
                    <i class="ec ec-shopping-bag"></i>
                    <span class="cart-items-count count">4</span>
                    <span class="cart-items-total-price total-price"><span class="amount">&#36;1,215.00</span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-mini-cart">
                    <li>
                        <div class="widget_shopping_cart_content">
    
                            <ul class="cart_list product_list_widget ">
    
    
                                <li class="mini_cart_item">
                                    <a title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart1.jpg" alt="">White lumia 9001&nbsp;
                                    </a>
    
                                    <span class="quantity">2 × <span class="amount">£150.00</span></span>
                                </li>
    
    
                                <li class="mini_cart_item">
                                    <a title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart2.jpg" alt="">PlayStation 4&nbsp;
                                    </a>
    
                                    <span class="quantity">1 × <span class="amount">£399.99</span></span>
                                </li>
    
                                <li class="mini_cart_item">
                                    <a data-product_sku="" data-product_id="34" title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart3.jpg" alt="">POV Action Cam HDR-AS100V&nbsp;
    
                                    </a>
    
                                    <span class="quantity">1 × <span class="amount">£269.99</span></span>
                                </li>
    
    
                            </ul><!-- end product list -->
    
    
                            <p class="total"><strong>Subtotal:</strong> <span class="amount">£969.98</span></p>
    
    
                            <p class="buttons">
                                <a class="button wc-forward" href="cart.html">View Cart</a>
                                <a class="button checkout wc-forward" href="checkout.html">Checkout</a>
                            </p>
    
    
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    
        <ul class="navbar-wishlist nav navbar-nav pull-right flip">
            <li class="nav-item">
                <a href="wishlist.html" class="nav-link"><i class="ec ec-favorites"></i></a>
            </li>
        </ul>
        <ul class="navbar-compare nav navbar-nav pull-right flip">
            <li class="nav-item">
                <a href="compare.html" class="nav-link"><i class="ec ec-compare"></i></a>
            </li>
        </ul>
    </div>
    

                <nav class="woocommerce-breadcrumb" ><a href="home.html">Home</a><span class="delimiter"><i class="fa fa-angle-right"></i></span>Smart Phones &amp; Tablets</nav>
                <div id="updateDiv">
                    <div id="primary" class="content-area">
                        <main id="main" class="site-main">
    
                            <header class="page-header">
                                <h1 class="page-title">Smart Phones &amp; Tablets</h1>
                                <p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
                            </header>
    
                            <div class="shop-control-bar">
                                <ul class="shop-view-switcher nav nav-tabs" role="tablist">
                                    <li class="nav-item"><a class="nav-link active" data-toggle="tab" title="Grid View" href="#grid"><i class="fa fa-th"></i></a></li>
                                    <li class="nav-item"><a class="nav-link " data-toggle="tab" title="List View Small" href="#list-view-small"><i class="fa fa-th-list"></i></a></li>
                                </ul>
                                <form class="woocommerce-ordering" method="get" action="{{route('store.sort')}}">
                                    <select name="orderby" class="orderby" action="/store/sort">
                                        <option value="menu_order" >Default sorting</option>
                                        <option value="price" >Sort by price: low to high</option>
                                        <option value="price-desc" >Sort by price: high to low</option>
                                    </select>&nbsp;&nbsp;
                                </form>
                            </div>
    
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="grid" aria-expanded="true">
                                    <ul class="products columns-3">
    
                                            <ais-results>
                                                <template scope="{ result }">
                                            <li class="product col-md-4">
                                                <div class="product-outer">
                                                    <div class="product-inner highlight">
                                                        <span class="loop-product-categories"><a href="product-category.html" rel="tag">Smartphones</a></span>
    
                                                        <a :href='result.url'>
    
                                                            <h3><ais-highlight :class-names="{'ais-highlight': 'highlight'}" :result="result" attribute-name="company"></ais-highlight> <ais-highlight :result="result" attribute-name="model"></ais-highlight> -  @{{ result.storage }} GB</h3>
                                                            <div class="product-thumbnail">
    
                                                                <img :src="result.photo" alt="" style="height:200px">
    
                                                            </div>
                                                        </a>
    
                                                        <div class="price-add-to-cart">
                            <span class="price">
                                <span class="electro-price">
                                    <ins><span class="amount">₹ @{{ result.price }}</span></ins>
    
                                </span>
                            </span>
                                                            <a rel="nofollow" href="single-product.html" class="button add_to_cart_button">Add to cart</a>
                                                        </div><!-- /.price-add-to-cart -->
    
                                                        <div class="hover-area">
                                                            <div class="action-buttons">
    
                                                                <a href="#" rel="nofollow" class="add_to_wishlist">
                                                                    Premium Quality Phone</a>
    
                                                            </div>
                                                        </div>
                                                    </div><!-- /.product-inner -->
                                                </div><!-- /.product-outer -->
                                            </li>
                                                </template>
                                            </ais-results>
                                        <ais-no-results></ais-no-results>
    
                                    </ul>
                                </div>
    
                            </div>
    
                            <div class="shop-control-bar-bottom">
                                <p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
                                <nav class="woocommerce-pagination">
                                    {{ $phones->links('pagination.default') }}
                                </nav>
                            </div>
    
                        </main><!-- #main -->
                    </div><!-- #primary -->
                </div>
    
                @include('layouts.sidebar')
    
            </div><!-- .container -->
        </div><!-- #content -->
    
    
    
    </ais-index>
    

    This is my sidebar.blade.php

    <aside class="widget widget_electro_products_filter">
        <h3 class="widget-title">Filters</h3>
    
            <aside class="widget woocommerce">
                <h3 class="widget-title">Brands</h3>
                <ul>
                    <div class="companies" id="company">
                        <ais-refinement-list attribute-name="company" :class-names="{
            'ais-refinement-list__count': 'badge',
            'ais-refinement-list__item': 'checkbox'
            }">
                        </ais-refinement-list>
                    </div>
                </ul>
    
            </aside>
            <aside class="widget woocommerce">
                <h3 class="widget-title">Storage</h3>
                <ul>
                    <div class="storages">
                        <ais-refinement-list attribute-name="storage" :class-names="{
            'ais-refinement-list__count': 'badge',
            'ais-refinement-list__item': 'checkbox'
            }">
                        </ais-refinement-list>
                    </div>
                </ul>
    
            </aside>
    
    </aside>
    <aside class="widget widget_text">
        <div class="textwidget">
            <a href="#">
                <img src="assets/images/banner/ad-banner-sidebar.jpg" alt="Banner"></a>
        </div>
    </aside>
    
    And finally 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');

    import InstantSearch from 'vue-instantsearch'; Vue.use(InstantSearch);

    /**

    • 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('Search', require('./components/Search.vue'));

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

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

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

12th October, 2017

prashant.godhwani left a reply on Uncaught TypeError: Cannot Read Property 'post' Of Undefined • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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 • 4 months 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.