CSS is not working with vue js on dynamic routing

Question

I created route in vue

{
  path: '/coursedetailed/:id',
  component: MyCourseDetailed,
  props: true
},

It works, but after I go to the page, it seems that css is disabled. All request are completed component if filled with data. There is one error in console. The other pages works well

Uncaught SyntaxError: Unexpected token <

My vue script for component:

<script>
import axios from 'axios'
import MenuWhite from '@/components/MenuWhite.vue'

export default {
  name: 'coursedetailed',
  props: ['id'],
  components: {
    MenuWhite
  },
  data: () => {
    return {
      course: [],
      errors: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      axios({
        method: 'get',
        url: this.$store.state.endpoints.baseUrl + '/api/courses/' + this.$route.params.id + '/',
        withCredentials: true,
        headers: {
           Authorization: `JWT ${this.$store.state.jwt}`,
          'Content-Type': 'application/json'
        }
      }).then((response) => {
        this.course = response.data
      })
    },
  isToken () {
    if (this.$store.state.jwt) {
      this.$router.push({ path: '/profile' })
    } else {
      this.$router.push({ path: '/' })
    }
  }
 }
}

Any ideas where the problem may be?

Search for the < character in your component's source code as well as in your css and see if there's a a syntax error. It doesn't seem to be in the code that you posted. — D Malan
– D Malan, Commented Mar 20, 2019 at 20:04
Could be an unsupported CSS feature, are you using filter()? — Len Joseph
– Len Joseph, Commented Mar 20, 2019 at 20:13

tony19 · Accepted Answer · 2022-07-15 21:37:42Z

4

Please check this link.

As it says, a basic Vue component may have a template, a script and a style tag.

Inside the style tag you may put your css directly or import your css file using the @import as you can see here by @Geraldine Golong's answer.

So, my suggestion is to put your css code inside your component (if so, recommend you to put inside your parent component), or import your css file using the proper Vue tag.

Hope it helps.

edited Jul 15, 2022 at 21:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 20, 2019 at 20:21

Mateus Arruda

3054 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

CSS is not working with vue js on dynamic routing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related