vue页面的展示以及默认值显示

• 前端路由

  import Vue from 'vue'
  import Router from 'vue-router'
  import updatebook from '@/components/UpdateBook'
  Vue.use(Router)
  export default new Router({
    routes: [
      {
        path: '/updatebook',
        name: 'updatebook',
        component: updatebook
      }
    ]
  })
  

• 前端代码

  <template>
      <div id='updatebook'>
          <p> 名称  <input type="text" v-model="name"></p>
          <p> 价格  <input type="text" v-model="price"></p>
          <button @click="sub">编辑图书</button>
      </div>
  </template>
  <script>
  export default {
      name:'updatebook',
      data() {
          return {
              name:'',
              price:0,
              id:0
          }
      },
      mounted(){
          // 获取上个页面传来的id
          let id = this.$route.params.id;
          this.axios({
              url:'/api/app02/get_one/',
              method:'get',
              params:{"id":id}
          }).then(res=>{
              // 将数据重写写入input表单
              this.id = res.data.data.id;
              this.name = res.data.data.name;
              this.price = res.data.data.price;
          })
      },
      methods:{
          sub:function(){
             let data = {
                 "id":this.id,
                 "name":this.name,
                 "price":this.price
             }
              //發送數據
              this.axios({
                  url:'/api/app02/book/',
                  method:'put',
                  data:data
              }).then(res=>{
                  if(res.data.status==200){
                      // 编辑图书成功，跳转到图书列表页
                  }else{
                      alert(res.data.msg);
                  }
              })
          }
      }
  
  }
  </script>