As a beginner in Vue, I am trying to understand the basics by creating an example that displays a list of numbers which are properties of vue data objects. However, when I attempt to use the v-for directive in a loop, I encounter an error message: TypeError: "fibnum is undefined" I need assistance in identifying and correcting any mistakes in my code or approach.
Here are the relevant files:
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
(function(){
'use strict'
// Define 'triangle' component to store 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}] }
});
})()