发表于: 2020-02-14 22:31:57

1 1249


今天完成的事情

今天主要完成的还是上线的功能和删除的功能,上线的功能通过师兄讲的方法很好的实现了我们在点击生效后的时时传递取值过程,过程是通过一个点击事件的传参可以很好的实现两者的同步。在我们的状态显示过程中,我们需要做出v-if的判断,判断此时item.status的状态是1或是2。

   <th v-if="item.status==1">草稿</th>
                          <th v-if="item.status==2">上线</th>

在这个判断中若我们将item.status的值时时的改变从而这个判断是时时的存在其中的。我们选择将这个item作为参数传递给点击函数中,从而就能够起到控制item.status的状态变化了。在我们点击上下线的位置也需要使用v-if来做出判断,

<a v-if="item.status==1" @click="updownline(item,item.status,item.id)">上线</a>
                          <a v-if="item.status==2" @click="updownline(item,item.status,item.id)">下线</a>

在这个点击事件undownline()中,传递的item和status和id都是在定义方法时可判断的内容,通过判断item.status的状态执行那一步的操作,

 if(status==1){
                let io={
                id:id,
                status:2
                }
                if(confirm("是否进行下线操作")){
   else{
                  let io={
                id:id,
                status:1
                }
                if(confirm("是否进行上线操作")){

在上线和下线的过程中分别做出put请求若是要求上线动作则传入status的值为1,若是要进行下线动作,那么将status的值为2传入。在请求成功的then中我们则要对我们的item.status重新做出一个赋值的动作,下线操作成功那么就给item.status传入一个2的数字,上线动作成功则是传入一个1这个数字。这样在我们的v-if判断中他能够时时的监控到我们的值的变化,从而销毁dom或是生成dom。

另外一个时删除的功能删除的功能相对来说是简单很多的,因为删除功能的作用仅仅是要删除数据库中的一项内容,我们在做出delete动作时做出一个delete的请求后就可以清除你传入的id的一项内容了。而后在then中仅需要做的步骤是一个刷新的动作,在这个刷新的用法中我通过师兄学习到了一个inject刷新的用法总的来说会比我们强制执行刷新功能会好一些,因为这其中仅仅是你只是刷新了你那一部分的路由页面,用法也是在我们跟组件的router-view中做出判断显示与否显示再隐藏再显示那么路由组件相当于进行了一次刷新效果。

在更组件中我们可以绑定这个方法,而后在其他组件中想何时调用它那么就可以相当于把此时的路由做了一次隐藏显示。

 reload() {

        this.isRouterAlive = false;

        this.$nextTick(function() {

          this.isRouterAlive = true;

        })

我们在删除的这个请求成功后调用这个方法那么就可以做到刷新路由的功能了。

 export default {

    inject: ["reload"],

    data() {

      return {

      }

    },

    methods: {

      //调用

      this.reload()

    }

  }

 inject: ["reload"],
 axios({
            url:'/api/a/u/article/'+id,
            method:'delete'
        })
        .then(response => {
            // 请求成功
            let res = response
            console.log(res);
            this.reload()
            })

明天要完成的事情

编辑功能的路由跳转以及页面编写



返回列表 返回列表
评论

    分享到