如何使用alpine.js 获取grandTotal
https://codepen.io/zaster/pen/eYWvJMv?editors=1010
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Document</title>
</head>
<body>
<ul x-data="{ rows: ['qty: 0', 'rate: 0', 'total: 0'], grandTotal: 0 }" x-effect="total = qty * rate">
<template x-for="row in rows">
<input x-text="row" type="text" x-model.number="qty" name="qty">
<input x-text="row" type="text" x-model.number="rate" name="rate">
<input x-text="row" type="text" x-model.number="total" name="total">
</template>
<input type="text" x-model.number="grandTotal" name="grandTotal">
</ul>
</body>
</html>
试试这个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Document</title>
</head>
<body>
<ul x-data="{
rows: [
{qty: 1, rate: 0, total: 0},
{qty: 2, rate: 0, total: 0}
],
grandTotal: 0 }">
<template x-for="row in rows">
<li x-effect="
grandTotal -= row.total;
row.total = row.qty * row.rate;
grandTotal += row.total;
">
<input type="text" x-model.number="row.qty" name="qty" />
<input type="text" x-model.number="row.rate" name="rate" />
<span x-text="row.total"></span><br/>
</li>
</template>
<span x-text="grandTotal"></span>
</ul>
</body>
</html>