Vue.js中v-for循环报fibnum未定义错误的原因排查求助

嘿，作为Vue新手遇到这个问题太正常啦，咱们直接揪出核心问题——你的v-for指令语法写错了，这才导致模板里的fibnum找不到。

问题根源 #

Vue里指令的标准语法是v-指令名="表达式"，但你写的是v-for:"fibnum in fib_row"，用冒号:代替了等号=。这种语法错误会让Vue完全无法正确解析循环变量fibnum，自然就会抛出“fibnum未定义”的错误。

解决方案 #

只需要把v-for里的冒号改成等号就行，修正后的<li>标签代码如下：

<li v-for="fibnum in fib_row"> {{fibnum.num}} </li>

修正后的完整代码 #

index.html

<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="/vue.js"></script>
</head>
<body>
<div id="fib-triangle">
<ol>
<li v-for="fibnum in fib_row"> {{fibnum.num}} </li>
</ol>
</div>
</body>
<script src="./trivue.js"></script>
</html>

trivue.js

这段代码本身是没问题的，给你提个小建议：Vue实例的命名可以更语义化一点（比如fibTriangle），不过不影响功能运行：

(function(){ 'use strict'
//Create 'triangle' component to hold fib-numbers
var triangle= new Vue({
    el:'#fib-triangle',
    data:{ fib_row:[{num: 1}, {num: 1}, {num: 2}, {num: 3}, {num: 5}, {num: 8}, {num: 10}] }
});
})()

额外小提示 #

• 所有Vue指令（比如v-if、v-bind、v-for）的语法都是v-xxx="表达式"，以后可别再把等号写成冒号啦～
• 确保你的vue.js文件路径正确，如果本地文件有问题，可以换成CDN引入，比如<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

内容的提问来源于stack exchange，提问作者Manny Adumbire