console.log is not working inside vue.js script

Question

I am quite new to vue.js, and I am trying to build an basic application that displays data fetched from an API.

I do not understand why I cannot use console.log inside my scripts :

<script>

    import Header from './components/layout/Header.vue'
    import Todos from './components/Todo.vue'

    export default {
      name: 'app',
      components: {
        Todos,
        Header,
      },
      data () {
        return {
          todos : []
        }
      },
      methods : {

        created () {
            fetch('https://jsonplaceholder.typicode.com/todos')
            .then( resp => resp.json())
            .then( data => {

                console.log(data);
            })
            .catch(err => err)

        }
      }
    }
</script>

I always got "unexpected console statement"

Does anybody knows how I can console log stuff inside vue scripts ? Am I missing something ??

Thanks a lot !!

Solution

You can try

methods: {
 log(msg){
  console.log(msg); 
 }
}

And when you want to write things to console, use:

{{ log(message) }}

Comments

[CGundlach]

Can you please provide a minimal, reproducible example, e.g. in JSFiddle?

[Jonas]

Thank you for you're answer ! I have tried that : however, it crashes the same error : I cannot write any console.log in my scripts : it always returns the same error "unexpected console statement" I have the feeling that it is not the right to log stuff in the console with vue but I don't understand why ...

[Jonas]

Thank you for you're answer ! It seems to be the same issue than for the other issues : I cannot write any console.log in my scripts : it always returns the same error "unexpected console statement" I have the feeling that it is not the right to log stuff in the console with vue but I don't understand why ...

[Jonas]

Thanks for the answer ! However it is the console.log statement that is causing the issue : it isn't working it any of my scripts : if I console.log in a vue component it crashes an error ...

[TJ Weems]

That's strange, I don't believe it is an issue with vue. I use it all the time.

[Jonas]

Hi ! it is the same issue with the console.log statement that does not seem to work inside the scripts It is super weird ...

[Xander Luciano]

Are you using a linter? Maybe you have this rule set and that's the error you are seeing: eslint.org/docs/rules/no-console Try adding // eslint-disable-next-line no-console on the line before your console statement to see if that fixes it. If so, it's a linting rule, not a vue / javascript error.

[Jonas]

You are right !! It seems to fix the issue I had, however I now have a TypeError: Cannot read property 'log' of undefined. Do you know what causes this issue ?

[Xander Luciano]

Odd... not sure what could cause that one, but try some other console functions like console.warn / console.error and try using console.log in other places (with that comment to disable the linter) and see if any of that works. Try to narrow down where / what the issue is.