How to make text from a form duplicate in another block in Vue.js?

A

Alex9312022-03-25 19:40:56

JavaScript

Alex931, 2022-03-25 19:40:56

Hello. Recently working with Vue.js. At me it turned out at "adding of the child" only to duplicate the text from inputs in the list with the heading "Children". And it is necessary that from the top form the text goes to the "Personal data" section and from all the forms below the text is duplicated in the list with the heading "Children". I can not quite understand how to do this, since I do it 1 time.

<!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:[email protected];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/[email protected]"></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;
  }

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Shamanov, 2022-03-25
@SilenceOfWinter

все это ... , давай по новой(с) у тебя должны быть отдельные компоненты, а не монолит. доступ к значению из нескольких компонентов можно организовать через глобальный объект доступный в компонентах или добавив обработчик события компонента