Добрый день, ребят помогите пожалуйста, проблема скорей всего мелочная, а второй день сижу - новая доска не создается с введенным именем в форме создания, делаю по аналогии с примерами из гугла, но не проталкивается название доски и соответственно доска не создается, есть ошибка в консоли, насчет title
<template>
<div class="trello">
<button class="smile">
<img src="../assets/smile-regular.svg" class="smile__icon" alt="smile">
</button>
<div class="trello__block">
<div class="trello__content">
<create-board v-on:create-board="addBoard" />
</div>
<div class="trello__content">
<my-boards-list v-bind:myBoards="myBoards" />
</div>
</div>
</div>
</template>
<script>
import CreateBoard from "./CreateBoard";
import MyBoardsList from "./MyBoardsList";
export default {
name: 'Trello',
components: {
MyBoardsList,
CreateBoard
},
data() {
return {
myBoards: [
{
title: '',
}
]
};
},
props: {
},
methods: {
addBoard(title) {
this.myBoards.push({
title,
});
},
},
}
</script>
<template>
<div class="new-board">
<button class="new-board__create" v-on:click="openCreateBoard">
<div class="new-board__plus">
<span></span>
<span></span>
</div>
Новая доска
</button>
<div class="board" v-show="isCreating">
<div class="board__wrapper">
<h2 class="board__title">Название доски</h2>
<div class="board__input">
<input v-model="title" type='text' placeholder="Моя доска">
</div>
<div class="board__buttons">
<button class="board__buttons-cancel" v-on:click="closeCreateBoard">Отмена</button>
<button class="board__buttons-save" v-on:click="addBoard()">Сохранить</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CreateBoard",
data() {
return {
title: '',
isCreating: false,
};
},
methods: {
openCreateBoard() {
this.isCreating = true;
},
closeCreateBoard() {
this.isCreating = false;
},
addBoard() {
if (this.title.length > 0) {
const title = this.title;
this.$emit('create-board', {
title,
});
this.title = '';
}
this.isCreating = false;
},
},
}
</script>
<template>
<div>
<my-board v-for="myBoard in myBoards" :key="myBoard"></my-board>
</div>
</template>
<script>
import MyBoard from './MyBoard';
export default {
name: "MyBoardsList",
props: ['myBoards'],
components: {
MyBoard,
},
}
</script>
<code>
<template>
<div class="my-board" v-show="isEditing">
<div class="my-board__wrapper">
<h2 class="my-board__title">{{ myBoard.title }}</h2>
</div>
</div>
</template>
<script>
export default {
name: "MyBoard",
props: ['myBoard'],
data() {
return {
isEditing: false,
};
},
}
</script>
</code>
