Почему значение переменной errorNode не отображается на странице? Вот фрагмент кода: <br/> <br/> <pre><code class="javascript"><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 = 'Вы не ввели
В вашем коде отсутствует закрывающая часть метода `addNode()`, что может привести к неправильной работе ключевых функций, и, в частности, к тому, что `errorNode` не будет обновляться.
Давайте сначала исправим метод `addNode()`, добавив необходимую логику и закрывающую фигурную скобку:
```javascript
addNode() {
if (!this.newNode) {
this.errorNode = 'Вы не ввели имя узла.';
return; // Выходим из функции, если поле пустое
}
this.info.nodes.push(this.newNode);
this.newNode = ''; // Очищаем поле ввода
this.errorNode = ''; // Очищаем сообщение об ошибке
}
```
Также убедитесь, что более ранний фрагмент кода, где вы определяете `data()`, написан правильно. У вас дважды объявлен метод `data()`, в нем не должно быть повторений. Правильная версия должна выглядеть следующим образом:
```javascript
export default {
data() {
return {
newNode: '',
errorNode: '',
ifEdited: false
};
},
props: {
info: {
type: Object,
required: true
},
index: {
type: Number,
required: true
},
deleteDevice: {
type: Function,
required: true
}
},
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 = 'Вы не ввели имя узла.';
return; // Выход из функции
}
this.info.nodes.push(this.newNode);
this.newNode = ''; // Очищаем поле ввода
this.errorNode = ''; // Очищаем ошибку
}
}
};
```
Основные моменты, на которые стоит обратить внимание:
1. **Корректная инициализация данных**: Не нужно дублировать `data()`, все переменные должны быть определены в одном объекте.
2. **Обработка ошибок**: Убедитесь, что `errorNode` обновляется и очищается, когда это необходимо.
3. **Правильное связывание**: Убедитесь, что `errorNode` действительно используется в шаблоне через `{{ errorNode }}`.
После внесения вышеуказанных изменений значение `errorNode` должно отображаться корректно на странице, если будет устранена ошибка в вашем методе добавления узла.
у тебя data() два раза определена.
надо так:
data() { return { newNode: '', errorNode: '', ifEdited: false } },
Обозначьте newNode как null или false
data(){ return{ newNode: null, errorNode: '' } },