Vue Reactivity 2

In this example below you will see how to do a Vue Reactivity 2 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 2</title>
    <link rel="stylesheet" href="">

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



<div id="app">
  <div class="container mt-5">
      <h5 class="mr-3 mb-3">Post id: {{}}</h5>
      <h5 class="mb-3">CurrentId: {{currentIndex+1}}</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" @click="save">Save</button>
    <hr class="my-3"/>
    <table class="table table-striped table-hover">
          <th>User Id</th>
        <tr v-for="(post,i) in posts" @click="refresh(i)">
  <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: { 
    currentIndex: '',
    posts: [],
    post: {
      userId: '',
      id: '',
      title: '',
      body: '',
      author: ''
  methods: {
    refresh(i) {
      this.currentIndex = i
      // = this.posts[i].userId = Object.assign({},this.posts[i])
      let vm = this
      //用陣列給值 vue會偵測不到
      // vm.posts[vm.currentInex] = Objet.assign({},
      // vm.post之前是給實際的值 不是用reference 在這裡就OK
      // vm.posts.splice(vm.currentIndex,1,
      // vm.posts.splice(vm.currentIndex,1,Object.assign({},
      // vm.post之前是給實際的值 不是用reference 在這裡就OK
  created (){
    let vm = this;
    request.get(root+ '/posts')
      .end(( err,res)=>{
        if (err) {
        vm.posts = res.body