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

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

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

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

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

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

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


回答:

只需要增加一个是否为赠品的属性就好了,比如说 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>


回答:

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


回答:

<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>

以上是 想请问大家一个关于vue 记录值的 问题?提供思路即可,谢谢大家? 的全部内容, 来源链接: utcz.com/p/932954.html

回到顶部