vue3给数组赋值失败

最新推荐文章于 2024-04-18 17:05:51 发布

原创最新推荐文章于 2024-04-18 17:05:51 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue3 专栏收录该内容

1 篇文章

订阅专栏

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

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