接口返回这样的数据,vue如何获取data中的数据

接口返回这样的数据,vue如何获取data中的数据,第1张

你是拿哪个变量接收的返回数据

比如如果你使用变量叫res接收的的话,如果向获取里面的pid的话,针对这条数据,就是

resdata[0]pid

因为data是个数组,虽然这里面只有一个元素

您好,vue3,经过数组重组,vant3页面拿不到值,vue3 使用proxy,对于对象和数组都不能直接。 具体原因:reactive声明的响应式对象被 arr 代理, *** 作代理对象需要有代理对象的前缀

通常情况下,我们可能会用v-for循环出一堆checkbox,提交数据的时候需要去获取选中的checkbox的value值,之前我的获取方式是给checkbox添加点击事件,这样确实能解决问题,但是总觉得有更好的办法,因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定,难道checkbox不能实现数据双向绑定吗?

呵呵哒,真的可以,我一直都不知道。。。。。。。。。

<input  type="checkbox"  v-model="checkFlag">

data () {

    return {

            checkFlag: true    //checkbox默认选中

    }

}

上面是最简单的用法,那如果使用场景是:购物车里循环遍历了所有用户添加的商品,用户选中一些商品,去结算,我们需要在结算的时候获取所有选中的checkbox的value值;

页面的大概效果如下:

这里我们给checkbox绑上了v-model的属性,以及value属性,checkedArr是一个数组,用来放选中的itemname,当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化;

强调最重要的一点,v-model会在checkbox选中的时候,自动将当前的value值push进数组;在取消checkbox的时候,自动将当前的value值pop出数组。

以下是依次选中四个商品,然后取消商品4,打印的checkedArr的值

至于全选按钮什么时候选中,那我们可以watch一下checkedArr:

以上就是关于接口返回这样的数据,vue如何获取data中的数据全部的内容,包括:接口返回这样的数据,vue如何获取data中的数据、vue3,经过数组重组,vant3页面拿不到值、vue中如何获取选中的checkbox的value值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9503745.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存