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

【问题标题】：How to concatenate/modify props in VueJS如何在 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" 吗？

标签： vue.js vuejs2 vue-component vue-props

【解决方案1】：

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

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

【讨论】：