vue3给数组赋值失败

阿亮。

于 2022-09-08 15:27:02 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/lwc_pubg/article/details/126765284

vue3 专栏收录该内容

1 篇文章

订阅专栏

博客内容讲述了在Vue3中遇到的问题，即直接赋值无法更新响应式数组。作者通过使用`reactive`包裹状态对象来解决这个问题，确保在`getsupplierId`函数中对`supplierIdcolumns`的修改能够正确响应。这是一个关于Vue3响应式原理和最佳实践的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 const supplierIdcolumns=reactive([])
 const getsupplierId=()=>{
       supplierIdcolumns=[]
       let params={type:'1'};
       $http.post('/trans/supplier/querySupplier',qs.stringify(params)).then((res)=>{
       if(res.code=='00000'){
        supplierIdcolumns=res.data
       }else{
         Toast.fail(res.codeMsg)
       }
      })
    }

刚开始代码这样写的发现绑不不上去值
然而 vue3是使用proxy 对于对象和数组不能直接整个赋值；
所以外面包一层解决问题：

 const state = reactive({
        supplierIdcolumns: [],
        });
        
 const getsupplierId=()=>{
       state.supplierIdcolumns=[]
       let params={type:'1'};
       $http.post('/trans/supplier/querySupplier',qs.stringify(params)).then((res)=>{
       if(res.code=='00000'){
        state.supplierIdcolumns=res.data
       }else{
         Toast.fail(res.codeMsg)
       }
      })
    }