Работа с формами на vue.js

185

28 февраля 2019, 16:20

Уже как 30 минут изучаю vue.js, полных примеров довольно мало на просторах интернета, поэтому решил поинтересоваться тут.
Как можно сделать так, что бы при нажатии на кнопку "Редактировать" появлялась одна форма (id="edit"), при этом брались значения из блока с определенным id (название и тело), а при нажатии на кнопку "Удалить" появлялось сообщение о успешном удалении (id="delete") ?

HTML:

<!DOCTYPE HTML>
<html>
   <head>
      <title>  / HR Tape</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link type="text/css" rel="stylesheet" href="../css/normalize.css">
      <link type="text/css" rel="stylesheet" href="../css/main.css">
   </head>
   <body>
      <div header>
         <div container>
            <a href="/" logo>Публикации</a><a href="/">Добавить</a>
         </div>
      </div>
      <div content>
         <div container>
            <div id="app">
               <div block v-if="errored">
                  <div class="title">Ошибка</div>
                  <div text>
                     <center>
                        <p>Сожалеем, но нам не удалось загрузить список публикаций.</p>
                     </center>
                  </div>
               </div>
               <div id="list" v-else>
                  <div block v-if="loading">
                     <div class="title">Подождите...</div>
                     <div text>
                        <center>
                           <p>Загружаем список...</p>
                        </center>
                     </div>
                  </div>
                  <div block v-else v-for="post in response">
                     <div class="title">{{ post.title }}</div>
                     <div text>
                        <p>{{ post.body }}</p>
                     </div>
                     <div bottom>
                        <a href="#" class="btn post disabled">Посмотреть</a><a href="#" class="btn post">Редактировать</a><a href="#" class="btn post">Удалить</a>
                        <div information>
                           <div row>
                              <span class="icon views" title="Просмотры"></span>
                              <span class="views">0 просмотров</span>
                           </div>
                           <div row>
                              <span class="icon comments" title="Комментарии"></span>
                              <span class="comments">0 комментариев</span>
                           </div>
                           <div row>
                              <span class="icon date" title="Опубликован"></span>
                              <span class="date">Сегодня</span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div id="add">
                  <div block="">
                     <div class="title">Добавить публикацию</div>
                     <div class="text"><input type="text" name="title" placeholder="Название"><textarea name="body" placeholder="Тело публикации"></textarea><input type="submit" value="Добавить"></div>
                  </div>
               </div>
               <div id="edit">
                  <div block="">
                     <div class="title">Редактировать публикацию</div>
                     <div class="text"><input type="text" name="title" placeholder="Название" value=""><textarea name="body" placeholder="Тело публикации" value=""></textarea><input type="submit" value="Сохранить изменения"></div>
                  </div>
               </div>
               <div id="delete">
                  <div alert="">Выбранная вами публикация была успешно удалена.</div>
               </div>
            </div>
         </div>
      </div>
      <script src="../js/vue.js"></script>
      <script src="../js/axios.js"></script>
      <script src="../js/main.js"></script>
   </body>
</html>

main.js:

new Vue ({
    el: '#app',
    data() {
        return {
          post: null,
          loading: true,
          errored: false
        };
      },
      mounted() {
        axios
          .get('https://jsonplaceholder.typicode.com/posts')
          .then(response => {
            this.response = response.data;
          })
          .catch(error => {
            console.log(error);
            this.errored = true;
          })
          .finally(() => (this.loading = false));
        }
});