AA
Size: a a a
AA
А
LD
А
VK
GS
VK
AA
Д
V💊
Д
GS
LD
AA
AA
GS
V💊
V💊
JS
<div id="vue" class="p-3 mb-2 bg-dark text-white mx-auto" style="width: 200px;">
<ol>
<li v-for="(todo, index) in todos" :key="index">{{ todo.title }}</li>
</ol>
<input class="form-control" v-model="inputTitle" type="text" placeholder="ToDo">
<input class="form-control" v-model="inputText" type="text" placeholder="ToDo">
<button type="button" @click="addTodo" class="btn btn-dark btn-lg btn-block">Добавить</button>
</div>
<div id="modal" v-if="modalView">
<p>Вы не ввели Заглавие или Текст</p>
<button @click="">11</button>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data: {
todos: [
{ title: '1', text: 'Семен', complete:"false"},
{ title: '2', text: 'Артем', complete:"false"},
{ title: '3', text: 'Игорь', complete:"false"}
],
inputTitle: '',
inputText: ''
},
methods: {
addTodo() {
if (this.inputText && this.inputTitle) {
this.todos.push({ title: this.inputTitle, text: this.inputText, complete: "false" })
this.inputTitle = ''
this.inputText = ''
}
else{
modal.modalView = true
}
}
}
}, {
el: '#modal',
data: {},
modalView: false
})
</script>
JS