Cuando ejecuto el siguiente código en Firefox o Chrome, me da el siguiente resultado:
{{ value }}
{{ value }}
{{ element }}
{{ element }}
{{ element }}
{{ element }}
Aquí está el código real, cuando lo ejecuto en jsfiddle o desbordamiento de pila, funciona bien:
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/vue@2.6.11"></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>¿Cual podría ser el problema?
0
21 feb. 2020 a las 12:44
2 respuestas
La mejor respuesta
Este es un problema de VSCode. No muestra todos los personajes, pero los almacena de todos modos. Entonces me mostró lo siguiente:
{{ value }}
Pero lo que realmente se guardó dentro del archivo y también fue procesado por el navegador fue esto:
Para evitar este error, puede instalar la siguiente extensión VSCode: Resaltar caracteres malos
1
23 feb. 2020 a las 17:21
Por lo general, hacer esto como simple importación de vuejs, tomando su código, funciona:
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/vue@2.6.11"></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]
}
}
});
0
21 feb. 2020 a las 09:57