#laravel #vue.js #bootstrap-4 #vuejs2 #axios
#laravel #vue.js #bootstrap-4 #vuejs2 #axios
Вопрос:
вот именно то , что мне нужно 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(«показать»)» я хочу обратное .
Ответ №1:
Во-первых, использование 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 в этой статье