有什么方法可以检查.vue 文件模板的语法错误吗？

Question

Quite embarrassingly, I made a mistake in a template section of the vue file. I wrote v-for as following.

<template>
    <ul v-for="{data, key} in json_data" :key="key">
        <!-- some list related -->
    </ul>
</template>

Basically I used curly braces instead of paranthesis.

However, as a novice javascript / vue.js / nuxt.js developer, I did not catch this for a long time. For the longest time, I thought I was doing something wrong in the script section of the code. I was wondering why data and key were returning undefined.

As I code more and more, those silly syntax error may go away. But is there any training wheel that can be used to catch those error?

Answer 1

i assume that you are using vue.js in production mode. you should use the vue.js library in developer's mode during development, this mode will display for you in the console a lot of details about your exceptions and errors.

here is the cdn:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

i also suggest that you use vue.js developer tools extension on your browser here is the link for this extension

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd