Здравствуйте. Недавно работаю с Vue.js. У меня получилось при "добавлении ребенка" только дублировать текст из инпутов в список с заголовком "Дети". А нужно, чтобы из верхней формы текст переходил в раздел "Персональные данные" и из всех форм внизу текст дублировался в список с заголовком "Дети". Не совсем могу понять, как это сделать, так как делаю в 1 раз.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToDo List Vue.js v.3</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Start App -->
<div id="app">
<div class="header">
<div class="container">
<div class="form">
<h2>Персональные данные</h2>
<input type="text"
v-bind:value="title"
@input="title = $event.target.value"
placeholder="Имя">
<input type="text"
v-bind:value="body"
@input="body = $event.target.value"
placeholder="Возраст">
</div>
</div>
</div>
<div class="container">
<div class="form_child">
<h2>Дети (макс. 5)</h2>
<div class="button">
<button class="btn" v-on:click="addTask">Добавить ребенка</button>
</div>
<input
type="text"
placeholder="Имя"
v-bind:value="title"
v-on:input="handleInput"
v-on:keypress.enter="addTask"
>
<input
type="text"
placeholder="Возраст"
v-bind:value="body"
v-on:input="handleInput"
v-on:keypress.enter="addTask"
>
<div class="down_button">
<button class="down_btn"
@click="createPost"
>
Сохранить
</button
>
</div>
</div>
<div class="second_page">
<h2>Персональные данные</h2>
<div class="post" v-for="post in posts">
<div class="post-main">{{ post.title }}</div>
<div class="post-text">{{ post.body }}</div>
</div>
<h2>Дети</h2>
<ul class="mask-list">
<li
v-for="(mask, index) in needDoList"
:key="mask.id"
>
<div>
<input type="checkbox" v-on:change="doCheck(index, 'need')"/>
<p>{{ mask.title }}</p>
<p>{{ mask.body }}</p>
</div>
<button class="btn-remove" v-on:click="removeMask(index, 'need')">Remove</button>
</li>
</ul>
</div>
</div>
</div>
<!-- End App -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./app.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
valueInput: '',
valueInputSecond: '',
posts: [],
needDoList: [],
completeList: []
};
},
methods: {
handleInput (event) {
this.valueInput = event.target.value;
this.valueInputSecond = event.target.value;
},
addTask () {
if(this.valueInput === '', this.valueInputSecond === '') { return };
this.needDoList.push({
title: this.valueInput,
body: this.valueInputSecond,
id: Math.random()
});
this.valueInput = '',
this.valueInputSecond = '';
},
createPost() {
const newPost = {
id: Date.now(),
title: this.title,
body: this.body,
}
this.posts.push(newPost);
},
doCheck (index, type) {
if(type === 'need') {
const completeMask = this.needDoList.splice(index, 1);
this.completeList.push(...completeMask);
}
else {
const noCompleteMask = this.completeList.splice(index, 1);
this.needDoList.push(...noCompleteMask);
}
},
removeMask (index, type) {
const toDoList = type === 'need' ? this.needDoList : this.completeList;
toDoList.splice(index, 1);
}
}
}
).mount('#app');
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 300;
}
h2 {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
margin: 25px 0;
border-bottom: 1px solid #bfbfbf;
}
.form {
display: flex;
flex-direction: column;
}
.form_child {
display: flex;
flex-direction: column;
}
input {
margin-top: 15px;
padding: 15px 10px;
border: 1px solid black;
}
.container {
width: 800px;
margin: 0 auto;
padding: 0 15px;
}
.header {
padding: 10px 0;
margin-bottom: 40px;
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .container .logo {
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
}
.header .container .form {
width: 60%;
display: flex;
justify-content: space-between;
}
.button {
display: flex;
justify-content: end;
}
.btn {
background-color: white;
border: 3px solid #00BFFF;
border-radius: 20px;
color: #00BFFF;
padding: 10px 15px;
width: 200px;
font-size: 16px;
}
.down_button{
display: flex;
justify-content: start;
margin-top: 30px;
}
.down_btn{
background-color: #00BFFF;
background-color: #00BFFF;
border: 1px solid ;
border-radius: 20px;
color: white;
padding: 10px 15px;
width: 120px;
font-size: 16px;
}
.btn:hover {
background-color: #0dd6f8;
border-color: #0dd6f8;
}
.second_page {
margin-top: 100px;
}
.mask-list li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
border-radius: 3px;
background-color: #fff;
}
.mask-list.complete-list li {
border-left-color: #999;
opacity: .5;
}
.mask-list {
padding-left: 0;
}
.btn-remove {
border: 1px solid #2a2f36;
font-size: 12px;
border: 2px solid #2a2f36;
background-color: #333333;
color: #fff;
font-weight: 700;
text-transform: uppercase;
padding: 5px 10px;
font-size: 12px;
outline: none;
transition: 0.2s;
}
.btn-remove:hover {
background-color: #535151;
border-color: #535151;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked){
position: absolute;
z-index: 1;
opacity: 0;
width: 20px;
height: 20px;
margin-top: 6px;
}
input[type="checkbox"]:checked + span,
input[type="checkbox"]:not(:checked) + span{
position: relative;
padding-left: 35px;
cursor:pointer;
}
input[type="checkbox"]:checked + span::before{
content:'';
position: absolute;
width: 16px;
height: 16px;
left:0;
top:calc(50% - 10px);
background-color: transparent;
border-radius: 2px;
border: 2px solid #4fc1de;
}
input[type="checkbox"]:checked + span::after{
content:'';
position: absolute;
width: 12px;
height: 12px;
transition: all .2s ease;
opacity: 1;
left: 4px;
top: calc(50% - 6px);
background-color: #4fc1de;
}
