Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not able to use lodash or jquery inside interpolations in .vue files in a Laravel 5.4 project

See original GitHub issue

Laravel Mix Version: 0.8.1
Node Version : 7.5.0
NPM Version 4.1.2
OS: macOS Sierra (10.12.3)

Description:

When I try to use any lodash function inside an interpolation I get the following error in the console:

[Vue warn]: Property or method "_" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <example> at /Users/jpbalda/Projects/laravel54/resources/assets/js/components/Example.vue)
warn @ app.js:32248
warnNonPresent @ app.js:33166
get @ app.js:33207
render @ app.js:31713
Vue._render @ app.js:33943
updateComponent @ app.js:34336
get @ app.js:34661
Watcher @ app.js:34653
Vue._mount @ app.js:34335
Vue$3.$mount @ app.js:37905
Vue$3.$mount @ app.js:40276
init @ app.js:33467
createComponent @ app.js:35901
createElm @ app.js:35844
createChildren @ app.js:35969
createElm @ app.js:35877
patch @ app.js:36332
Vue._update @ app.js:34362
updateComponent @ app.js:34336
get @ app.js:34661
Watcher @ app.js:34653
Vue._mount @ app.js:34335
Vue$3.$mount @ app.js:37905
Vue$3.$mount @ app.js:40276
Vue._init @ app.js:35108
Vue$3 @ app.js:35156
(anonymous) @ app.js:11202
__webpack_require__ @ app.js:20
(anonymous) @ app.js:40331
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
app.js:32248 [Vue warn]: Error when rendering component <example> at /Users/jpbalda/Projects/laravel54/resources/assets/js/components/Example.vue: 
warn @ app.js:32248
Vue._render @ app.js:33950
updateComponent @ app.js:34336
get @ app.js:34661
Watcher @ app.js:34653
Vue._mount @ app.js:34335
Vue$3.$mount @ app.js:37905
Vue$3.$mount @ app.js:40276
init @ app.js:33467
createComponent @ app.js:35901
createElm @ app.js:35844
createChildren @ app.js:35969
createElm @ app.js:35877
patch @ app.js:36332
Vue._update @ app.js:34362
updateComponent @ app.js:34336
get @ app.js:34661
Watcher @ app.js:34653
Vue._mount @ app.js:34335
Vue$3.$mount @ app.js:37905
Vue$3.$mount @ app.js:40276
Vue._init @ app.js:35108
Vue$3 @ app.js:35156
(anonymous) @ app.js:11202
__webpack_require__ @ app.js:20
(anonymous) @ app.js:40331
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
app.js:31713 Uncaught TypeError: Cannot read property 'toUpper' of undefined
    at Proxy.render (app.js:31713)
    at VueComponent.Vue._render (app.js:33943)
    at VueComponent.updateComponent (app.js:34336)
    at Watcher.get (app.js:34661)
    at new Watcher (app.js:34653)
    at VueComponent.Vue._mount (app.js:34335)
    at VueComponent.Vue$3.$mount (app.js:37905)
    at VueComponent.Vue$3.$mount (app.js:40276)
    at init (app.js:33467)
    at createComponent (app.js:35901)

Steps To Reproduce:

I did a fresh laravel 5.4 install using laravel new laravel54.
Ran npm install.
Modified welcome.blade.php like so:

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script>
            window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
    </head>
    <body>
        <div id="app">
            <example></example>
        </div>
    </body>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</html>

Also modified Example.vue (notice the _.toUpper function call inside the interpolation):

<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">Example Component</div>

                    <div class="panel-body">
                        {{ _.toUpper('Message') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

Ran npm run dev.
Refreshed the browser and boom! I get the error mentioned above.

Same thing happens if I try to use jQuery in the interpolation.

I tried something similar in jsfiddle and it works without a problem.

My quick and dirty solution so far has been to wrap the lodash function call in a method, like this:

<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">Example Component</div>

                    <div class="panel-body">
                        {{ myMethod("Message") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        methods: {
            myMethod(value) {
                return _.toUpper(value);
            }
        }
    }
</script>

Any ideas @JeffreyWay ??

Issue Analytics

State:
Created 7 years ago
Comments:14

Top GitHub Comments

11reactions

posvacommented, Mar 6, 2017

Hey, do Vue.prototype._ = _ to use lodash as _ in templates. But I recommend you to define your own filters/methods that use lodash methods instead

2reactions

JeffreyWaycommented, Feb 19, 2017

I don’t think this is related to Mix. You can get the same result, if you use vue-cli.

https://www.dropbox.com/s/wpr6zqdu5ujo9e3/Screenshot 2017-02-19 16.06.56.png?dl=0

I assume it’s related to how .vue file components are compiled.