Reputation: 4797
When I run the below code in Firefox or Chrome it gives me the following result:
{{ value }}
{{ value }}
{{ element }}
{{ element }}
{{ element }}
{{ element }}
Here is the actual code, when I run it in jsfiddle or stack overflow, it works just fine:
new Vue({
el: '#app',
data: {
testData: {
name: 'TESTOBJECT',
id: 10,
data: [1.67, 1.33, 0.98, 2.21]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
<ul>
<li v-for="value in testData">
<template v-if="Array.isArray(value)">
<div v-for="element in value">{{ element }}</div>
</template>
<template v-else>
{{ value }}
</template>
</li>
</ul>
</div>
What could be the issue?
Upvotes: 0
Views: 242
Reputation: 4797
This is a VSCode
issue. It does not show all characters, but stores them anyway. So it showed me the following:
{{ value }}
But what actually was saved inside the file and also processed by the browser was this:
To prevent this error, you can install the following VSCode extension: Highlight Bad Chars
Upvotes: 1
Reputation: 452
Usually doing this as simple importing vuejs, taking your code, it works:
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in testData">
<template v-if="Array.isArray(value)">
<div v-for="element in value">{{ element }}</div>
</template>
<template v-else>
{{ value }}
</template>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: "#app",
data: {
testData: {
name: "TESTOBJECT",
id: 10,
data: [1.67, 1.33, 0.98, 2.21]
}
}
});
Upvotes: 0