Vue Reactivity 1

In this example below you will see how to do a Vue Reactivity 1 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 1</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="mb-3">Post id: {{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>
        </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">Save</button>
    </form>
    <hr class="my-3"/>
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">Post id: {{post.id}}</h5>
      </div>
      <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>
          <div class="col-sm-4 pt-2 border border-top-0 border-bottom-0">
            <p>Title: </p>
            <p>{{post.title}}</p>
          </div>
          <div class="col-sm-4 pt-2">
            <p>Author: {{post.author}}</p>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <p>Content: {{post.body}}</p>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.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-1-eGoEqW */
const request = window.superagent
const root = 'https://jsonplaceholder.typicode.com'

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) {
          console.log(err)
        }
        let response = res.body
        console.log(response)
        // vm.post.userId = response.userId
        // vm.post.id = response.id
        // vm.post.title = response.title
        // vm.post.body = response.body
        //解法2
        // vm.$set(vm.post,'author','')
        //解法3
        // vm.post = Object.assign({},response,{author: ''})
        vm.post = Object.assign({},response)
      })
  }
})

Comments