Skip to content
Advertisement

how to show data from two database tables in vue with vuetify

I have a list of clients wiht a salesman field which is bound to a user id in the database, ¿how do i show in the table the user name that corresponds to its id?

<v-data-table :headers="headers" :items="arrayClientes">
  <template v-slot:item.user_id="{ item }" :items="userLists">
          <span>{{item.user_id}}</span>
  </template>

Script:

computed: {  
      userLists() {
        return this.$store.state.user.users;
      },
    },
    created(){
        this.$store.dispatch('user/getUsers')
    },

Advertisement

Answer

You can try to create a method, which filters the specific user id and returns the user object.

For example:

export default {
  methods: {
    getUser(id) {
      return this.userLists.filter((user) => user.id === id))[0];
    },
  },
};

After that you can simply call this method in your span tag and specify the user id as a parameter.

Note: this does not check if the user id exists in the users list.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement