Делаю небольшой сайт и почему-то значение переменно errorNode не отображается на странице
<template>
<div>
<p class="error">Текущая ошибка: {{ errorNode }}</p>
<div>
<h3>{{ info.name }}</h3>
<input v-if="ifEdited" type="text" @input="insertData($event.target.value)">
<ul>
<li v-for="(li, i) in info.nodes" :key="i">
{{ li }}
<button v-if="ifEdited" @click="deleteNodes(i)">Удалить</button>
</li>
<div v-if="ifEdited">
<input @input="addNodeInfo($event.target.value)" type="text">
<button @click="addNode(newNode)">Добавит узел</button>
</div>
</ul>
</div>
<div>
<button @click="deleteDevice(i)">Удалить</button>
<button v-if="!ifEdited" @click="editDevice">Редактировать</button>
<button v-else @click="editDevice">Сохранить</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
newNode: '',
errorNode: ''
}
},
props:{
info:{
typeof: Object,
required: true
},
index:{
typeof: Number,
required: true
},
deleteDevice:{
typeof: Function,
required: true
}
},
data(){
return{
ifEdited: false
}
},
methods:{
editDevice(){
this.ifEdited = !this.ifEdited;
},
deleteNodes(index){
this.info.nodes.splice(index, 1)
},
insertData(value){
this.info.name = value
},
addNodeInfo(value){
this.newNode = value
},
addNode() {
if (!this.newNode) {
this.errorNode = 'Вы не ввели название узла';
console.log(this.errorNode);
return false;
}
this.errorNode = ''; // Сбрасываем сообщение об ошибке
this.info.nodes.push(this.newNode); // Добавляем новый узел
this.newNode = ''; // Очищаем поле ввода
}
}
}
</script>
<style scoped>
</style>
