Alpine Computed

by janzikmund

HTML

<head>
  <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
   <div x-data="{ count: { f1: 0, f2: 0, sum: 0} }">
    <input type="number" x-model="count.f1">
    <input type="number" x-model="count.f2">
    <input type="text" readonly x-model="count.sum" x-bind:value="!isNaN(count.f1) && !isNaN(count.f2) ? parseInt(count.f1) + parseInt(count.f2) : ''" @input="alert('value changed!');">
    <h2 x-text="count.sum"></h2>
  </div>
</body>