显示在单击获取模式按钮后在 axios 响应中收到的引导模式

Posted 2023-02-23

【中文标题】显示在单击获取模式按钮后在 axios 响应中收到的引导模式

【英文标题】：show a bootstrap modal which received on axios response after clicking the get modal button

【发布时间】：2020-12-19 22:15:39

【问题描述】：

这正是我需要的 1.当用户单击按钮时，将执行该方法以从 api 获取引导模式。 然后显示给用户。 注意：最初，模态 html 不应位于单击按钮时将要创建的 dom 中。 我已经在 jquery 中完成了这一点，但在 vue 中没有。 一些代码 1.调用模态（bootstrapvue btn）

  <b-button variant="success" @click="getAssignform">Assign</b-button>

脚本

export default 
  data: function () 
    return 
      assigntoteamform: '',
      ,
    
  ,

  methods: 
 
    getAssignform() 

        this.axios(
          method: "get",
          url: "/assignig/new/456reqform",
          headers: 
            Authorization: "Bearer " + localStorage.getItem("jkey"),
          ,
        )
          .then((response) => 
            **this.assigntoteamform =response.data;**


          )
          .then((
   *$("#assigntohandmodal").modal("show")*  //this is what i try but this will work on the next click
          ))
          .catch((error) => console.log(error))
          .finally(() => (this.loading = false));

    
;
</script>

将响应绑定到 html dom

<span v-html="assigntoteamform"></span>

这是来自检查元素的模式，我可以看到它按预期附加。

<div id="assigntohandmodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class=" card-header modal-header">

                <div class=" modal-title">Assign to a team</div>
                <button type="button" class="float-right close" data-dismiss="modal">&times;</button>
            </div>
            <div class=" d-flex justify-content-center modal-body">
                <span id="form_result2"></span>

                <select class=" btn-success dynamic" name="team">
                     @foreach($list as $team)<option value="$team->team__id">$team->team__name</option>
                        @endforeach
                    </select>

                     <div class="form-group" align="center">
                             <input type="hidden" name="handleret" id="handleret" />
                             <input type="hidden" name="handleret" id="handleret" />
                             <input type="hidden" name="hidden_id" id="hidden_id" />
                    </div>

            </div>
            <div class="d-flex justify-content-center modal-footer">
                 <button type="button" id="distotechnicia" class="subbb btn btn-success">Ok</button></div>
        </div>
    </div>
</div>

它再次使用 html，但在 vue 中这个“this.assigntoteamform =response.data;”在这个“ $("#assigntohandmodal").modal("show")"之后被执行，我想要相反的。

【参考方案1】：

首先，在 Vue 项目中使用 jQuery 是一种不好的做法。它会起作用，但这只是不必要的开销。 Vue 可以做 jQuery 所做的事情，甚至可以说更多。我看到您已经在使用 bootstrapVue，因此您根本不需要 jQuery。

为了回答您的问题，Vue 中的 DOM 更新是异步的。这意味着当您将this.assigntoteamform 分配给response.data，然后继续显示模态时，DOM 不一定按该顺序更新。有一种机制可以在做某事之前等待 DOM 更新，通过$nextTick。

用你所拥有的替换

export default 
  ....
  methods: 
    getAssignform() 
      this.axios(
        method: "get",
        url: "/assignig/new/456reqform",
        headers: 
          Authorization: "Bearer " + localStorage.getItem("jkey"),
        ,
      )
        .then((response) => 
          this.assigntoteamform =response.data;**
          this.$nextTick(() =>  // waits for DOM to update after setting the value of this.assigntoteamform before opening the modal
            $("#assigntohandmodal").modal("show")
          )
        )
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    
;
</script>

您可以在article 中阅读有关 Vue.$nextTick 的更多信息