如何在vue js內聯單擊@click事件上進行乘法運算

Question

我正在嘗試在 v-for 循環中為數組項進行乘法運算，我可以輕松地進行加法：product.q++ 和減法，但是對於乘法我遇到了問題，這是我的短代碼

<div v-for="product in products">
    <span @click="product.q++,product.wt*=product.q">CLICK ME</span>
</div>

 if array is [1.215]; its a long array just for demonstration purpose iam using one element.

Output：是 1.215，然后是 2.43，然后是 7.290000000000001，這是我想要的，這是正確的 = 1.215，然后是 2.43，然后是 3.645

我也試過@click="product.q++,product.wt=product.wt*product.q"

注意：每次點擊我的 q 值都會增加，我只想將它與舊值相乘。 IE。 我想要什么 1.215 *1, 1.215 *2,

但它這樣做 - 1.215*1、2.43*2 和加倍幫助。

Answer 1

應該從模板層中刪除邏輯。 @click應該調用updateThisProperty的method ，然后相應地更新數組項的屬性。

根據代碼的其他結構，這可能是突變、計算或只是設置數據值。

Answer 2

我對你的代碼沒有任何問題。

 new Vue({ el: "#app", data: { products: [{ wt: 1.215, q: 1, output: 0 }] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="product in products"> <span @click="product.q++,product.output=product.wt*product.q"> CLICK ME</span> </div> <div v-for="product in products">{{product}}</div> </div>