如何在 VueJS 中连接/修改道具

Posted 2023-02-23

【中文标题】如何在 VueJS 中连接/修改道具

【英文标题】：How to concatenate/modify props in VueJS

【发布时间】：2021-10-14 02:55:15

【问题描述】：

我正在尝试在Vue2 中构建一个应用程序我有一个父组件，我在其中使用v-for 将数据作为道具传递给子组件。

这是我的父组件：

<template>
    <div class="row" v-for="(item, index) in variables">
        <design-arch :details="item" :selectedFields="selectedFields"></design-arch>
    </div>
</template>

props:['selectedFields'],

data() 
    return 
        variables:[
            id: 1, role: 2, specialisation: 13, name: 'ABC - spec 1', role_name: 'ABC', spec_name: 'spec 1',
            id: 2, role: 2, specialisation: 24, name: 'ABC - spec 2', role_name: 'ABC', spec_name: 'spec 2',
            id: 3, role: 2, specialisation: 27, name: 'ABC - spec 3', role_name: 'ABC', spec_name: 'spec 3',
        ]
    

    

下面是我的子组件：

<template>
    <table v-if="tableData && tableData.data.length">
        <thead class="">
            <tr>
                <th>Sr No</th>
                <th>Projects Count</th>
                <th>Value</th>
                <th>Area</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in tableData.data">
                <td>tableData.meta.from + index</td>
                <td>item.projects_count</td>
                <td>item.value</td>
                <td>item.area</td>
            </tr>
        </tbody>
    </table>
</template>

props: ['details', 'selectedFields'],

data()
    return
        loading: false,
        tableData:,
        filters: '',
    
,

methods:
    fetchData()
        this.filters = this.selectedFields;
        this.filters['role'] = typeof this.selectedFields['role'] !== 'undefined' ? this.selectedFields['role'] : [id: this.details.role, name: this.details.role_name];
        this.filters['specialisation'] = typeof this.selectedFields['specialisation'] !== 'undefined' ? this.selectedFields['specialisation'] : [id: this.details.specialisation, name: this.details.spec_name];
        this.filters['sort_by_column'] = typeof this.selectedFields['sort_by_column'] !== 'undefined' ? this.selectedFields['sort_by_column'] :  column: 'projects_count', order: 'desc';

        console.log(this.filters)
        
        //axios call... with payload as this.filters
    
,
    

在上面的代码中，我们需要连接或修改 prop - selectedFields 并调用 API 来获取数据。由于每个组件都有特定的修改，我们需要在子组件中重新计算。

目前我的过滤器在每个子组件中都是相似的，并且在 Axios 调用期间不会反映修改。

我们如何修改本地数据中的 props 元素。这样我们就可以有不同的执行。

感谢任何更好的方法。谢谢。

【问题讨论】：

您在父组件上尝试过:selectedFields.sync="selectedFields" 吗？

【参考方案1】：

我建议在道具 details 上添加一个 Vue watch。任何时候details 更改它都会重新运行fetchData()。见Vue watch。

watch: 
  details: 
    immediate: true,
    deep: true,
    handler (oldValue, newValue) 
      this.fetchData()