如何解决x-for 在 alpinejs 中没有反应性地工作
我正在尝试使用 x-for 遍历对象数组(即 carriageOptions 数组)。如果我用一些虚拟值预先填充它,它会按预期打印它们。但是如果我从 axios 响应中动态地将一个项目推送到 carriageOptions 数组,x-for 不会响应性地循环到新推送的项目。
刀片
<div x-data="transportation()" x-init="initWatcher" x-ref="transportation">
<div class="form-group row">
<label class="col-md-3 col-form-label">Transits</label>
<div class="col-md-9 col-form-label">
@foreach ($transits as $transit)
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" id="{{ $transit->id }}" name="transit{{ $transit->id }}" type="checkbox" value="{{ $transit->id }}" x-model="checkedTransits">
<label class="form-check-label" for="{{ $transit->id }}">{{ $transit->name }}</label>
</div>
@endforeach
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="carriage_id">Carriage</label>
<div class="col-md-9">
<select class="form-control" id="carriage_id" name="carriage_id" autocomplete="off">
<template x-for="carriageOption in carriageOptions" :key="carriageOption">
<option x-bind:value="carriageOption.id" x-text="carriageOption.name"></option> --> this is printing nothing ....
</template>
</select>
</div>
</div>
</div>
JS
function transportation() {
return {
checkedTransits: [],carriageOptions: [],initWatcher() {
this.$watch("checkedTransits",function(value) {
var carriageOptions = [];
value.forEach(async function (element) {
const response = await axios.get(`/transits/${element}?ajax=1`);
carriageOptions.push({name: response.data.name,id: response.data.id});
});
this.carriageOptions = carriageOptions;
console.log(this.carriageOptions); --> I'm getting expected values here
});
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。