Блог

вот именно то , что мне нужно 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">amp;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(«показать»)» я хочу обратное .

Во-первых, использование jQuery в проекте Vue является плохой практикой. Это будет работать, но это просто ненужные накладные расходы. Vue может делать то же, что и jQuery, и, возможно, больше. Я вижу, вы уже используете bootstrapVue, и поэтому вам вообще не нужен jQuery.

Чтобы ответить на ваш вопрос, обновления DOM в Vue являются асинхронными. Это означает, что когда вы назначаете 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>  

Вы можете прочитать больше о Vue.$nextTick в этой статье