Using debugger to get a breakpoint in Vue

user_772309 0
Viewed 64

I'm very new to Vue and am trying to get a simple scoped breakpoint within my component.

<template>
  <div class="date-picker">
    <p>{{ date }}</p>
  </div>
</template>


<script>
import moment from 'moment'

export default {
  data () {
    debugger;

    return {
      date: moment().format('YYYY-MM-DD')
    }
  }
}
</script>


<style lang="scss" scoped>

</style>

I was hoping the debugger statement could put a breakpoint where I could access moment in the Chrome developer console but that doesn't appear to work. Is this possible?

vue.js
1 Answers

you cannot put a debugger in the data property.

try something like this:

<template>
  <div class="date-picker">
    <p>{{ date }}</p>
    <button @click="debuggerButton">Debugger</button>
  </div>
</template>


<script>
import moment from 'moment'

export default {
  data () {
    return {
      date: moment().format('YYYY-MM-DD')
    }
  },
  methods: {
      debuggerButton(){
          debugger
      }
  }
}
</script>
user_70824070
Related