vue.js - vuejs chrome 进不了断点

问题描述

问 题

<template>
    <div class="wrap">
        <div v-once>Message: {{ msg.split('').reverse().join('') }}</div>
        <div v-html="rawHtml"></div>
        <div v-bind:id="'list-' + dynamicId">llll</div>
        <button v-bind:disbaled="someDynamicCondition" v-on:click="handleClick">submit</button>
        <div>
            {{message|capitalize}|lastCapitalize}
        </div>
    </div>
</template>

<script>
 export default {
     data () {
         return {
             msg:"qwert",
             rawHtml:"<div>koko</div>",
             dynamicId:"666",
             someDynamicCondition:false,
             message:"nothing"
         }
     },
     methods:{
      handleClick(e){
         console.info(e.target.disabled)
      }
     },
     filters:{
         capitalize(value){
             if (!value) return ''
             value=value.toString()
             return value.charAt(0).toUpperCase() + value.slice(1)
         },
         lastCapitalize(value){
            if (!value) return ''
            value=value.toString()
            console.info(value)
            return value.slice(0,value.length-2)
         }
     }
 }
</script>

<style scoped>
    .wrap {
        border: 1px solid blue;
    }
</style>

在data函数和filters的函数中打断点，刷新后都进不去，click事件是可以进去的
在控制台也输出不了value

解决方案

在需要断点的地方打上
debugger
可以直接进入断点

如果只是需要输出参数，console即可

这篇关于vue.js - vuejs chrome 进不了断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！