Vue.js：如何使用id选择另一个数组中的项目

Question

我有2个阵列，一个用于州，另一个用于国家。我想显示州的国家名称。因此，我使用Laravel 5.7作为后端，并使用Country::get();国家/地区的数据获取数据，而Vue.js则接收到这样的数组：

countries:Array(4)
    0:created_at:(...)
        deleted_at:(...)
        id:(...)
        name:(...)
        shortName:(...)
        updated_at:(...)
    1:{…}
    2:{…}
    3:{…}

我对国家和国家也一样。 State::get();并可以接收到此信息：

states:Array(1)
    0:country_id:(...)
        created_at:(...)
        deleted_at:(...)
        id:(...)
        name:(...)
        shortName:(...)
        updated_at:(...)

当我使用v-for将数据显示到表中时：

<tbody>
    <tr v-for="state in data.states">
        <td>{{SOMTHING TO DISPLAY COUNTRY NAME}}</td>
        <td>{{state.name}}</td>
        <td></td>
    </tr>
</tbody>

在第一个单元格中，我尝试执行{{data.countries[state.country_id]['name']}}，但失败了。而是在数组中显示另一个国家/地区，其中键对应于我给的country_id。

我知道我可以通过执行State::with('country')->get();来解决问题，然后再在state.country.name中加入我的Vue组件，但是由于我已经发送了每个国家/地区，因此我正在寻找另一种执行方式它。

有什么主意吗？

Answer 1

您想使用映射到JOIN的{​​{1}}将国家数据state.country_id转换为州数据。

通过ID映射您的国家/地区

country.id

或使用reduce

const cmap = {} // in your vue.data
countries.forEach(it=>cmap[it.id] = it)

将地图置于计算属性中，以便按需计算一次。

const cmap = countries.reduce((acc,cur)=>{acc[cur.id]=cur; return acc},{})

创建查找方法

countryMap(){
    return this.countries.reduce((acc,cur)=>{acc[cur.id]=cur; return acc},{})
}

在这样的模板中使用它

getCountryName(state){
    return this.countryMap[state.country_id].name
}

您不需要 一种查找方法，但是如果您使用的是Vue，则可以拆分一下。 <div>{{getCountryName(state)}}</div> 在模板中有点混乱。

Answer 2

由于我将地图与许多对象一起使用，因此我只是以不需要每次重复的方式更改了代码。

从现在开始，代码是一种方法，而不是计算出的属性。

dataMap: function($model) {
    return this.data[$model].reduce((acc,cur)=>{acc[cur.id]=cur; return acc},{});
},

我以这种方式在组件中使用它：

{{dataMap('countries')[dealer.country_id].name}}

我的数据如下：

export default {
    data() {
        return {
            data: {
                countries:{...},
                states:{...},
                cities:{...},
                groups:{...},
                dealers:{...},
                users:{...},
            },
        }
    },

这样，我可以将dataMap方法用于在数据数组中找到的所有内容，而不必重新编码新的映射计算属性。我只需要这样做：

{{dataMap('users')[something.user_id].field}}
{{dataMap('groups')[something.group_id].field}}