Vue Reactivity 1

In this example below you will see how to do a Vue Reactivity 1 with some HTML / CSS and Javascript

This awesome code was written by barbo1942, you can see more from this user in the personal repository.
You can find the original code on
Copyright barbo1942 ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Vue Reactivity 1</title>
    <link rel="stylesheet" href="">

  <link rel='stylesheet prefetch' href=''>



<div id="app">
  <div class="container mt-5">
      <h5 class="mb-3">Post id: {{}}</h5>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="userId">User Id</label>
            <input class="form-control" id="userId" type="text" v-model="post.userId"/>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="title">Title</label>
            <input class="form-control" id="title" type="text" v-model="post.title"/>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="author">Author</label>
            <input class="form-control" id="author" type="text" v-model=""/>
      <div class="form-group">
        <label for="content">Content</label>
        <textarea class="form-control w-100" id="content" name="" cols="10" rows="2" v-model="post.body"></textarea>
      <button class="btn btn-primary" type="button">Save</button>
    <hr class="my-3"/>
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">Post id: {{}}</h5>
      <div class="card-body p-0">
        <div class="row m-0">
          <div class="col-sm-4 pt-2">
            <p>User id: {{post.userId}}</p>
          <div class="col-sm-4 pt-2 border border-top-0 border-bottom-0">
            <p>Title: </p>
          <div class="col-sm-4 pt-2">
            <p>Author: {{}}</p>
      <div class="card-footer">
        <p>Content: {{post.body}}</p>
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
const request = window.superagent
const root = ''

const app = new Vue({
  el: "#app",
  data: {
    posts: [],
    post: {
      userId: '',
      id: '',
      title: '',
      body: '',
      author: ''
  created (){
    let vm = this;
    request.get(root+ '/posts/3')
      .end(( err,res)=>{
        if (err) {
        let response = res.body
        // = response.userId
        // =
        // = response.title
        // = response.body
        // vm.$set(,'author','')
        // = Object.assign({},response,{author: ''}) = Object.assign({},response)