带有Alpinejs的Laravel Balde组件将数据传递回父模型
将以下刀片组件与Alpinej一起使用,如何将模型值传递给父?
<x-choises
x-model="formData.association"
:options="$associations"
:selected="$currentAssociation"
class="m-expertsearchcomponent__associations"
label="{{__('Associations', 'namespace')}}"
/>
该组件的标记将在这里启动另一个aplinejs组件,
<div @class($attributes['class'])>
<div class="m-expertsearchcomponent__select">
<select class="nochoices" x-data="cselect" x-ref="select">
<option selected value="">{{ $label }}</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->title }}</option>
@endforeach
</select>
</div>
</div>
这是ChildComponent的JS
import Choices from "choices.js";
import Alpine from "alpinejs";
Alpine.data('cselect', function () {
init: {
if(!this.$refs.select) return;
const self = this;
const currentValue = this.$root._x_model && this.$root._x_model.get()
const choice = new Choices(this.$refs.select, {
itemSelectText: '',
removeItems: true,
allowHTML: false,
removeItemButton: true,
});
console.log(currentValue)
if(currentValue) {
choice.setChoiceByValue(currentValue)
}
this.$refs.select.addEventListener('change', function (event) {
return event.target.value;
self.$root.select._x_model.set(selectValue)
})
this.$refs.select.addEventListener('removeItem', function (event) {
//self.$refs.select._x_model.set(null)
})
}
});
Having the following blade component used with alpinejs how can I pass the model value to the parent?
<x-choises
x-model="formData.association"
:options="$associations"
:selected="$currentAssociation"
class="m-expertsearchcomponent__associations"
label="{{__('Associations', 'namespace')}}"
/>
the markup of the component which will init another aplinejs component
<div @class($attributes['class'])>
<div class="m-expertsearchcomponent__select">
<select class="nochoices" x-data="cselect" x-ref="select">
<option selected value="">{{ $label }}</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->title }}</option>
@endforeach
</select>
</div>
</div>
here is the js from childcomponent
import Choices from "choices.js";
import Alpine from "alpinejs";
Alpine.data('cselect', function () {
init: {
if(!this.$refs.select) return;
const self = this;
const currentValue = this.$root._x_model && this.$root._x_model.get()
const choice = new Choices(this.$refs.select, {
itemSelectText: '',
removeItems: true,
allowHTML: false,
removeItemButton: true,
});
console.log(currentValue)
if(currentValue) {
choice.setChoiceByValue(currentValue)
}
this.$refs.select.addEventListener('change', function (event) {
return event.target.value;
self.$root.select._x_model.set(selectValue)
})
this.$refs.select.addEventListener('removeItem', function (event) {
//self.$refs.select._x_model.set(null)
})
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论