Setting component data using AJAX

[mikemartin]

I'm submitting a form with AJAX and having trouble setting my component's success value.

Here's what I have so far:

<div x-show="subscribeVisible" x-data="{ subscribeVisible: false, success: false }">
  <form id="subscribe" x-ref="form">
      <input type="email" name="email" />
    <button @click.prevent="submitForm($refs)">Subscribe</button>
  </form>
  <div x-show="success">Form submitted!</div>
</div>

<script>
  function submitForm($refs) {
    axios.post($refs.form.action, new FormData($refs.form))
    .then(response => {
      console.log(response.data);
      return this.success === true
    });
  }
</script>

[HugoDF]

You need to make your x-data a function call

<div x-show="subscribeVisible" x-data="component()">
  <form id="subscribe" x-ref="form">
      <input type="email" name="email" />
    <button @click.prevent="submitForm($refs)">Subscribe</button>
  </form>
  <div x-show="success">Form submitted!</div>
</div>

<script>
  function component () {
    return {
      subscribeVisible: false,
      success: false,
      submitForm() {
        axios.post(this.$refs.form.action, new FormData(this.$refs.form))
        .then(response => {
          console.log(response.data);
          return this.success === true
        });
      }
    }
  }
</script>

[mikemartin]

Thanks so much. That did it. Here's the final solution:

<script>
  function subscribe () {
    return {
      errors: [],
      subscribeVisible: false,
      success: false,
      submitForm() {
        axios.post(this.$refs.form.action, new FormData(this.$refs.form))
        .then(response => {
          if (response.data.success) {
            this.errors = [];
            this.success = true;
            this.$refs.form.reset();
          }
        });
      }
    }
  }
</script>

[SimoTod]

👍
You probably want to disable the button on click and reenable it on error or success as well. It will save you from figuring out why you have duplicate subscriptions in the future (yeah some people double click buttons 😂).