Alpine component broke filament create button

I made a custom form field component, put some alpine inside and now my create button doesnt work

6 Replies

GushOP•9mo ago

message.txt

You going to need to move the script outside of the component. It’s a caveat with livewire. And how the things in script tags can’t react with the dom diff.

GushOP•9mo ago

how can i do that? im working with packages so in the js folder of my package i created ProductComponent.js with the following:

export function tableComponent() {
  return {
      products: [],
      form: {
          ref: '',
          description: '',
          qtd: 0,
          unit_value: 0
      },
      showForm: false,
      openForm() {
          this.showForm = true;
      },
      closeForm() {
          this.showForm = false;
          this.resetForm();
      },
      resetForm() {
          this.form = {
              ref: '',
              description: '',
              qtd: 0,
              unit_value: 0
          };
      },
      saveProduct() {
          this.products.push({
              ...this.form,
              total_value: (this.form.qtd * this.form.unit_value).toFixed(2)
          });
          this.closeForm();
      },
      removeProduct(index) {
          this.products.splice(index, 1);
      }
  };
}

export function tableComponent() {
  return {
      products: [],
      form: {
          ref: '',
          description: '',
          qtd: 0,
          unit_value: 0
      },
      showForm: false,
      openForm() {
          this.showForm = true;
      },
      closeForm() {
          this.showForm = false;
          this.resetForm();
      },
      resetForm() {
          this.form = {
              ref: '',
              description: '',
              qtd: 0,
              unit_value: 0
          };
      },
      saveProduct() {
          this.products.push({
              ...this.form,
              total_value: (this.form.qtd * this.form.unit_value).toFixed(2)
          });
          this.closeForm();
      },
      removeProduct(index) {
          this.products.splice(index, 1);
      }
  };
}

now what i have to do? import it in my blade view?

awcodes•9mo ago

Checkout the assets docs. https://filamentphp.com/docs/3.x/support/assets

Assets - Core Concepts - Filament

GushOP•9mo ago

did that, same problem create button doesnt respond bumping this

awcodes•9mo ago

this is the section you need to follow. https://filamentphp.com/docs/3.x/support/assets#asynchronous-alpinejs-components

Assets - Core Concepts - Filament

Gaming

Programming

Alpine component broke filament create button

Did you find this page helpful?