Vue <template> in a .vue file with Lodash

Question

In my .vue file within my template section I have:

<a v-bind:href="'javascript:artist(\'' + _.escape(artist) + '\')'">

which is using the Lodash function _.escape. This generates a string of errors the first of which is:

[Vue warn]: Property or method "_" is not defined on the instance but referenced during 
render.

However in the same file in the script section of the component I am happily and successfully using a range of Lodash functions.

This is a Laravel app and in my app.js file I have this code:

require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router';

window.Vue.use(VueRouter);

import lodash from 'lodash';
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash });

import SearchHome from './components/search.vue';

const routes = [
{
    path: '/',
    components: {
        searchHome: SearchHome
    }
},

]

const router = new VueRouter({ routes })

const app = new Vue({ router }).$mount('#app')

Can anyone please help me?

I have also tried <a v-bind:href="'javascript:artist(\'' + this.$lodash.escape(artist) + '\')'"> — Jonathan Hyams
– Jonathan Hyams, Commented Jan 19, 2018 at 12:19
SORRY! I have solved it. It should of course be $lodash.escape(). — Jonathan Hyams
– Jonathan Hyams, Commented Jan 19, 2018 at 12:26

mathk · Accepted Answer · 2018-01-22 13:37:11Z

3

Try to use a computed value instead. This will improve readability. Avoid complex operation in a binding.

<a :href="artistLink">

And in the script

import _ from 'lodash'

export default {
    computed: {
       artistLink () {
           return 'javascript:artist(\'' + _.escape(this.artist) + '\')'
       }
    }
}

edited Jan 22, 2018 at 13:37

answered Jan 19, 2018 at 13:23

mathk

8,1416 gold badges47 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue <template> in a .vue file with Lodash

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related