Menu
My vue component like this :
<template> ... <ul class="nav nav-tabs nav-tabs-bg"> <li v-for="tab in tabs" role="presentation" :class="setActive(tab.url)"> <a :href="baseUrl + tab.url">{{tab.title}}</a> </li> </ul> ... </template> <script> export default { props: ['shop'], data() { return{ tabs: [ { title: 'product', url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name) }, { title: 'info', url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name) + '/info' } ] } }, methods: { setActive(pathname){ return {active: window.location.pathname == pathname} }, strSlug: function(val) { return _.kebabCase(val) } } } </script> If the code run, there exist error like this :
[Vue warn]: Error in data(): "ReferenceError: strSlug is not defined"
If I console.log(window.location.pathname), the result like this :
/store/21/chelsea-hazard-store
So if it is the same as url with data in tabs, then it will active
I call the strSlug method to convert each into lowercase and convert spaces into -
Seems it can not call the method from the data
How can I solve the error?
564
We can call a Vue. js method on page load by calling it in the beforeMount component hook. We can also make a method run on page load by calling it in the created hook. And we can do the same in the mounted hook.
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
js provides a Vue. js data() method to the user. Basically in vue. js data() we defined collection of logic and stored in component using vue. js we can access data Node.
To call a method in a child component with Vue. js, we can pass in a prop from the parent component to its child. Then in the child component, we watch the prop's value and run the method we want. in the child component to register the testProp prop and add the sayHello method.
If you have a function in data that will be used in a context of another object (like an event handler, for example), then this will not point to the Vue instance. You will have to preserve the reference in another variable from the scope of data():
methods: { shuffle() {} }, data() { var self = this; return { onClick: function() { self.shuffle() } } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
