带有Alpinejs的Laravel Balde组件将数据传递回父模型

发布于 2025-02-11 11:48:45 字数 1697 浏览 2 评论 0原文

将以下刀片组件与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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文