Vue.js учебники: Conditonals in Vue.js не работает-свойство или метод не определены
Я пытаюсь следовать этому учебнику и скопировал код. Единственное, что я изменил, - это расположение index.js, что не должно быть проблемой, так как учебник hello world работал нормально. Консоли выводят следующее:
[Vue warn]: Property or method "seen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in <Root>)
Поэтому мои вопросы, если, если есть что-то не так с этим кодом от index.js файл:
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
или что-то не так с html-файлом (вставляется в файл markdown, таким образом, титульная часть)
---
title: vue
---
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script src="vue/index.js"></script>
</body>
</html>
Это, вероятно, простая ошибка,но я уже два часа возился. Было бы здорово, если бы кто-нибудь мог мне помочь.
Ответы - Vue.js учебники: Conditonals in Vue.js не работает-свойство или метод не определены / Vue.js Tutorials: Conditonals in Vue.js not working - Property or method is not defined
02.12.2020 10:14:55
Во-первых, мы пишем data не так, а так, data(){return { seen:true };}
И этот код работает:
<template>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
seen: true,
};
},
};
</script>
<style>
</style>
Что-то классное в Vuejs заключается в том, что HTML JS и CSS часть находятся на одной странице.
А что касается HTML-части, то это просто <template>, а внутри добавьте сразу <div> без <body>
02.12.2020 10:36:00
Если вы используете CDN, ваш код должен быть таким :
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
seen: true,
};
},
});
</script>
<style>
</style>
</html>вы определяете данные как функцию, которая возвращает объект.