alpinejs $watch issue

alpinejs-watch-issue.markdown

alpinejs $watch issue

A Pen by Peter on CodePen.

License.

index.html

<script defer src="https://unpkg.com/alpinejs@3.1.0/dist/cdn.min.js"></script>
<form x-data="form()" x-on:submit.prevent="submit">
  
  <div>
    <label>
    A
    <input x-model="a" />
    
  </label>
  </div>
  
  <div>
    <label>
    B
    <select x-model='b'>
      <option>foo</option>
      <option>bar</option>
    </select>
    
  </label>
  </div>
  
  <button>Submit</button>
  
</form>

script.js

function form() {

    function submit() {

        console.log(this.a);
      
    }


    return {
        init() {
          this.$watch('b', () => this.submit());
        },
        a: '',
        b: 'foo',
        submit
    };

}