javascript Vue js 3 Reactivity与组件API中的数据更改方法混淆

tv6aics1 于 2023-08-02 发布在 Java

关注(0)|答案(1)|浏览(100)

大家好，我有一个关于在vue 3中更改数据的快速问题，让我向你展示我的代码，这样你就知道我的想法了。

const packageInfo = reactive({
    data:[]
})

字符串
这是我的代码样本数据包是这样的

data =>
[
    {
       id:"ship_id"
       ship:"ship_number"
       products:
              [
                 {product:"product_name",id:"product_id"},
                 {product:"product_name2",id:"product_id2"}
              ]
    }
]

型
所以基本上我有两个函数，一个用于删除带有id的包，另一个用于删除带有id的产品，我的包函数工作得很好，删除数据也会影响UI，我的意思是更改会影响组件，也会从表中删除数据
但对于产品删除与id我面临的问题数据被删除但它不影响组件和用户界面这是我的代码

async function deletePackage(pack){
    let { data } = await axios.delete(`/packages/${pack.id}`);
    if(data == 1){
        packageInfo.data = packageInfo.data.filter(function( obj ) {
            return obj.id !== pack.id;
        });
    }
    
}
async function deleteProduct(pack,product){
    
    let tmData = packageInfo.data
    tmData[tmData.indexOf(pack)].products = tmData[tmData.indexOf(pack)].products.filter(function( obj ) {
            return obj.id !== product.id;
    });
    packageInfo.data = tmData
    // packageInfo.data[packageInfo.data.indexOf(pack)].products = packageInfo.data[packageInfo.data.indexOf(pack)].products.filter(function( obj ) {
    //         return obj.id !== product.id;
    // });
}

型
在第二个函数中，我试图删除具有相同ID的产品，而不是总软件包或总产品
你能告诉我我哪里做错了吗
编辑：
下面是我在UI中使用packageInfo的方法

<ScannerTable :table-data="packageInfo"/>

型
在ScannerTable组件中

const props = defineProps({
    tableData:{
        default:[]
    }
})

型
我用这个来获取数据，一切都工作得很好，甚至软件包删除工作和模板表中的更新，但产品删除不工作！

**编辑2：**即使我改变了显示的方式，如果显示值为真，它仍然无效，我错过了什么，让我向你展示一个图像，第一个对象数组是数据，完全是React性的，但第二层是产品，它不是React性的，并且在UI中不会影响更改

x1c 0d1x的数据

编辑3

我发现这种方式我可以更改数据和产品从表中删除，所以基本上我改变了产品的父发货，并调用Tick，其中更改，所以基本上产品是没有React的，但有人能解释我为什么吗？！我很困惑，即使我在我的节目中使用ref（），但仍然没有效果

packageInfo.data.forEach(async(dasdata,i)=>{
        if(dasdata.id == pack.id){
            packageInfo.data[i].show = false
            dasdata.products.forEach(async(prods,j)=>{
                if(prods.id == product.id){
                    packageInfo.data[i].products[j].show = false;
                }
            })
            await nextTick()
            packageInfo.data[i].show = true
        }
    })

型

JavaScript

来源：https://stackoverflow.com/questions/76800295/vue-js-3-reactivity-confused-with-data-change-methods-in-component-api

1条答案

按热度按时间

km0tfn4u1#

这是我模拟你的问题所做的。

<template>
<div>
  <ul v-for="pkg in packageInfo.data" :key="pkg.id">
  <li>
    {{ pkg.ship }}
    <span @click="removePackage(pkg)" style="color: red; cursor: pointer">X</span>
  </li>
  <ul v-for="prod in pkg.products" :key="prod.id">
    <li>
      {{ prod.product }}
      <span @click="removeProduct(pkg,prod)" style="color: red; cursor: pointer">X</span>
    </li>
  </ul>
</ul>
</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const packageInfo = reactive({
  data: [
    {
      id: 'ship_id1',
      ship: 'ship_number1',
      products:
        [
          { product: 'product_name1_1', id: 'product_id1' },
          { product: 'product_name1_2', id: 'product_id2' },
        ],
    },
    {
      id: 'ship_id2',
      ship: 'ship_number2',
      products:
        [
          { product: 'product_name2_1', id: 'product_id11' },
          { product: 'product_name2_2', id: 'product_id22' },
        ],
    },
  ],
});

function removePackage(pack: any) {
  packageInfo.data = packageInfo.data.filter(x => x.id !== pack.id);
}

function removeProduct(pack: any, product:any) {
  pack.products = pack.products.filter(x => x.id !== product.id);
  // let tmData = packageInfo.data
  // tmData[tmData.indexOf(pack)].products = tmData[tmData.indexOf(pack)].products.filter(function( obj ) {
  //   return obj.id !== product.id;
  // });
  // packageInfo.data = tmData
}
</script>

字符串
我认为你的问题是传递 prop 或者你的渲染机制有问题。
我有另一个实现（ScannerTable在一个单独的文件中），但情况并非如此。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript Vue js 3 Reactivity与组件API中的数据更改方法混淆

1条答案

相关问题

热门标签

最新问答