Vue Reactivity 2

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

Thumbnail
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 Codepen.io
Copyright barbo1942 ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Vue Reactivity 2</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  
  
</head>

<body>

  
<div id="app">
  <div class="container mt-5">
    <form>
      <h5 class="mr-3 mb-3">Post id: {{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>
        </div>
        <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>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="author">Author</label>
            <input class="form-control" id="author" type="text" v-model="post.author"/>
          </div>
        </div>
      </div>
      <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>
      </div>
      <button class="btn btn-primary" type="button" @click="save">Save</button>
    </form>
    <hr class="my-3"/>
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Index</th>
          <th>Id</th>
          <th>User Id</th>
          <th>Author</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(post,i) in posts" @click="refresh(i)">
          <td>{{i+1}}</td>
          <td>{{post.id}}</td>
          <td>{{post.userId}}</td>
          <td>{{post.author}}</td>
          <td>{{post.title}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/superagent/3.5.1/superagent.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/barbo1942/vue-reactivity-2-BwEwMQ */
const request = window.superagent
const root = 'https://jsonplaceholder.typicode.com'

const app = new Vue({
  el: "#app",
  data: { 
    currentIndex: '',
    posts: [],
    post: {
      userId: '',
      id: '',
      title: '',
      body: '',
      author: ''
    }
  },
  methods: {
    refresh(i) {
      this.currentIndex = i
      // this.post.userid = this.posts[i].userId
      this.post = Object.assign({},this.posts[i])
    },
    save(){
      let vm = this
      
      //用陣列給值 vue會偵測不到
      // vm.posts[vm.currentInex] = Objet.assign({},vm.post)
      
      // vm.post之前是給實際的值 不是用reference 在這裡就OK
      // vm.posts.splice(vm.currentIndex,1,vm.post)
      // vm.posts.splice(vm.currentIndex,1,Object.assign({},vm.post))
      
      // vm.post之前是給實際的值 不是用reference 在這裡就OK
      vm.$set(vm.posts,vm.currentIndex,vm.post)
    }
  },
  created (){
    let vm = this;
    request.get(root+ '/posts')
      .end(( err,res)=>{
        if (err) {
          console.log(err)
        }
        vm.posts = res.body
    
      })
  }
})

Comments