想请问大家一个关于vue 记录值的 问题？提供思路即可，谢谢大家？

Question

图上面的单价为18.00，勾选赠品的时候改为0.00 再取消勾选赠品，又回到18.00

有点不知道怎么处理，这个感觉只能在选中事件做两个临时变量的存储，而且这是循环出的数据，请问有什么好的思路可以提供吗，谢谢大家

主要是通过this.goods_list_data[index].goods_price 拿的单价价格

谢谢大家回答，我还是做了两个模板内容去判断

Answer 1

只需要增加一个是否为赠品的属性就好了，比如说 this.goods_list_data[index].is_freebie。
然后单价这边只需要判断 is_freebie 是否为 true 就好了，如果为真就设置为 0，不为真就取 this.goods_list_data[index].goods_price 的值就行了。

一段伪代码

<template v-for="item in goods_list_data" :key="item.id">
  <div>  
    <label>单价：</label>    
    <input :value="item.is_freebie ? 0 : item.goods_price" :disabled="item.is_freebie" @input="handleInput" />
  </div>
  <div>
    <label>赠品：</label>
    <input type="checkbox" v-model="item.is_freebie" />
  </div>
</templalte>

Answer 2

我的思路是这样的：您这个数据都是后台给的模板，价格啥的都是后台给的，那您循环出来，一个商品信息就是一个item，那这个item里又checkbox选项，价格等，那您checkbox的2种状态 就对应2种价格，那您在触发change事件可以去改变对应item里绑定的这个checkbox的值，价格您可以根据当前item中chekbox值去取，

Answer 3

<template>
<div>
    <ul>
        <li v-for="(item, index) in goods_list_data" :key="index">
            <p>价格<input type="text" v-model="item.goods_price" /></p>
            <p>赠品<input type="checkbox" v-model="item.is_gift" @change="changeGift(index)" /></p>
        </li>
    </ul>
</div>
</template>

<script>
import {reactive} from "vue";

export default {
    setup() {

        const goods_list_data = reactive([{
            goods_price: 18.02,
            goods_price2: 18.02,
            is_gift: false
        }, {
            goods_price: 19.01,
            goods_price2: 19.01,
            is_gift: false
        }]);

        const changeGift = (index) => {
            if (goods_list_data[index].is_gift) {
                goods_list_data[index].goods_price = 0;
            } else {
                goods_list_data[index].goods_price = goods_list_data[index].goods_price2;
            }
        }

        return {goods_list_data, changeGift}
    },
}
</script>