JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="app">
  <h2>Articles</h2>
  <hr />
  <form class="mb-3" @submit.prevent="addArticle">
    <div class="form-group">
      <input class="form-control" placeholder="Title" v-model="article.title" />
    </div>
    <div class="form-group">
      <textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
    </div>
    <button type="submit" class="btn btn-light btn-block">Add new</button>
  </form>
  <hr />
  <div class="card card-body mb-2" v-for="article in articles" v-bind:key="article.id">
    <template class="article-row" v-if="edit === article.id">
        <form @submit.prevent="editArticle">
          <div class="form-group">
            <input class="form-control" placeholder="Title" v-model="article.title" />
          </div>
          <div class="form-group">
            <textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
          </div>
          <!-- <input type="hidden" v-model="article.id" /> -->
          <button type="submit" class="btn btn-light btn-block">Update</button>
        </form>
      </template>
    <template v-else>
        <h3>{{ article.title }}</h3>
        <p v-html="article.body"></p>
        <hr />
        <div>
          <button @click="toggleEditMode(article.id)" class="btn btn-warning">Edit</button>
          <button @click="deleteArticle(article.id)" class="btn btn-danger">Delete</button>
        </div>
      </template>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: {
      articles: [{
        id: "1",
        title: "title 1",
        body: "lorem"
      },{
        id: "2",
        title: "tile 2",
        body: "ipsum"
      },{
        id: "3",
        title: "title 3",
        body: "hocus pocus"
      },],
      article: {
        id: "",
        title: "",
        body: ""
      },
      article_id: "",
      edit: false
    },
  methods: {
    addArticle() {
      console.log(JSON.stringify(this.article));
      fetch("/api/article", {
        method: "post",
        body: JSON.stringify(this.article),
        headers: {
          "content-type": "application/json"
        }
      })
        .then(res => res.json())
        .then(data => {
          this.article.title = "";
          this.article.body = "";
          alert("Article added!", "success");
          this.fetchArticles();
        })
        .catch(err => console.log(err));
    },
    editArticle() {
      console.log(JSON.stringify(this.article));
      fetch("/api/article", {
        method: "put",
        body: JSON.stringify(this.article),
        headers: {
          "content-type": "application/json"
        }
      })
        .then(res => res.json())
        .then(data => {
          alert("Article updated!", "success");
          this.fetchArticles();
        })
        .catch(err => console.log(err));
    },
    toggleEditMode(article_id) {
    	for (let index = 0; index < this.articles.length; index++) {
				const article = this.articles[index];
				if(article.id === article_id){
        		this.article = article;
            break;
        }
			}
      this.edit = article_id;
    }
  }
})