VueJS conditional class binding on route name?

Question

I have some text that i am trying to change the styling on based on route name.I have set up 2 route names, ads and webs and have set up a watcher to watch the routes. If the route name is either ads or webs i want the text to have color:white;background-color:orange. But i am not sure how to do it.

new Vue({
  el: '#app',
  data() {
    return {
      styleClass: null
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name == 'ads' || to.name == 'webs') {

      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <span><h1>Hello!!!</h1></span>
</div>

Fixed it. and how am i supposed to go about changing the style based on the condition? — Somethingwhatever
– Somethingwhatever, Commented Dec 18, 2019 at 1:34

Phil · Accepted Answer · 2019-12-18 01:47:13Z

2

I'd create a computed property to represent if the current route matches your criteria.

computed: {
  highlight () {
    return this.$route.matched.some(({ name }) => /^(ad|web)s$/.test(name))
  }
}

Then you can use that in a class binding expression.

<span :class="{ highlight }">Text goes here</span>

and in your CSS

.highlight {
  color: white;
  background-color: orange;
}

See https://router.vuejs.org/api/#route-object-properties for info on the matched property.

edited Dec 18, 2019 at 1:47

answered Dec 18, 2019 at 1:40

Phil

166k25 gold badges265 silver badges269 bronze badges

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

4 Comments

Somethingwhatever Over a year ago

Would i still need the watcher in this case?

Phil Over a year ago

@Somethingwhatever no, the computed property does basically the same thing

Somethingwhatever Over a year ago

I see you changed the code. /^(ad|web)s$/.test(name)). I am not quite sure what this is or is it the same thing as the previous one?

Phil Over a year ago

@Somethingwhatever it's just a regex test of the route name. It would be easier to maintain than a bunch of || conditions if you choose to add more criteria

Fu March · Accepted Answer · 2019-12-18 01:55:03Z

I guess you are missing the route vuejs plugin and name your application into the route name too. Here the full example. Hope you get what you want

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo, name: 'ads' },
  { path: '/bar', component: Bar, name: 'nowebs' }
]
 
const router = new VueRouter({
   routes
}) 
const app = new Vue({
    router,
    data() {
        return {
           styleClass: null
        }
    },
    watch: {
        '$route' (to, from) {
           if (to.name == 'ads' || to.name == 'webs') {
               this.styleClass = "color:white;background-color:orange"
           } else {
               this.styleClass = ""
           }
       }
    }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <span><h1 :style="styleClass">Hello!!!</h1></span>

  <p>
       <router-link to="/foo">Go to Foo</router-link>
         <router-link to="/bar">Go to Bar</router-link>
   </p>
   <router-view></router-view>
</div>

Collectives™ on Stack Overflow

VueJS conditional class binding on route name?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related