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='updategoods'>
          <h2>编辑图书</h2>
          <p>名称 <input type="text" v-model="name"></p>
          <p>价格 <input type="text" v-model="price"></p>
          <p>分类 
              <select v-model="cate_id">
                  <option v-for='i in cates' :value="i.id"></option>
              </select>
          </p>
          <button @click="sub">编辑</button>
      </div>
  </template>
  <script>
  export default {
      name:'updategoods',
      data(){
          return {
              name:'',
              price:0,
              cate_id:0,
              cates:[],
              id:0
          }
      },
      mounted(){
          // 获取该图书的详细信息
          // 商品Id
          let id = this.$route.params.id;
          this.axios({
              url:'/api/app03/getone/',
              method:'get',
              params:{'id':id}
          }).then(res=>{
              this.name = res.data.data.name;
              this.price = res.data.data.price;
              this.cate_id = res.data.data.cate;
              this.id = res.data.data.id;
          })
          // 获取所有分类
          this.axios({
              url:'/api/app01/cate/',
              method:'get'
          }).then(res=>{
              this.cates = res.data.data;
          })
      },
      methods:{
          sub:function(){
              let data = {
                  "id":this.id,
                  "name":this.name,
                  "price":this.price,
                  "cate_id":this.id
              }
              // 发送数据
              this.axios({
                  url:'/api/app01/book/',
                  method:'put',
                  data:data
              }).then(res=>{
                  if(res.data.status==200){
                      //编辑成功,跳转到商品页面
                      this.$router.push({
                          name:'book'
                      })
                  }else{
                      alert(res.data.msg);
                  }
              })
          }
      }
  
  }
  </script>