如何从MySQL数据库中的对象数组中获取和显示特定值？

我有一个用户数组，其中包含每个用户的对象，包括全名、id、角色等。所说的用户有一个参数：user_机器，它的数组本身充满了对象，我想从该数组的每个对象获取并显示特定值。更具体地说，是这样的： 我显示所有用户，如果用户的user\u machines数组中有对象，我想显示所述对象的machine\u名称

此时，我的查询如下所示：

class UserController extends Controller
{
    public function index()
    {
        $users = User::with('userMachines')->get();
        return response()->json(
            [
                'status' => 'success',
                'users' => $users->toArray()
            ],
            200
        );
    }

这是我需要的全部信息，但我不知道如何分类。 下面是我的getUsers混音：

export const getUsers = {
  methods: {
    getUsers() {
      axios
        .get("users")
        .then(res => {
          this.users = res.data.users;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};

这是我的初始化方法：

 methods: {
    initialize() {
      this.users = [
        {
          id: "",
          full_name: "",
          username: "",
          role: "",
          division: "",
          center: "",
          machines: "",
          user_machines: []
        }
      ];
    },

以下是数据表：

            <v-data-table
              :headers="headers"
              :items="users"
              :key="users.id"
              :search="search || radio"
              hide-actions
              class="elevation-1"
            >
              <template v-slot:items="props">
                <td class="text-xs-left">
                  <v-avatar :size="30" color="grey lighten-4">
                    <img :src="avatar">
                  </v-avatar>
                </td>
                <td class="text-xs-left">{{ props.item.full_name }}</td>
                <td class="text-xs-left">{{ props.item.role }}</td>
                <td class="text-xs-left">{{ props.item.division }}</td>
                <td class="text-xs-left">{{ props.item.center }}</td>
                <td class="text-xs-left">{{ props.item.user_machines }}</td>
                <td class="justify-right layout ml-3">
                  <v-spacer></v-spacer>
                  <v-btn color="#009af9" flat @click="editItem(props.item)">ВИЖ</v-btn>
                </td>
              </template>
              <template v-slot:footer>
                <td :colspan="headers.length">
                  <v-btn color="#009af9" class="getMoreButton" large dark>GET MORE</v-btn>
                </td>
              </template>
              <template v-slot:no-data>
                <v-alert
                  :value="true"
                  color="error"
                  icon="warning"
                >Sorry, nothing to display here :(</v-alert>
                <v-btn color="#009af9" @click="initialize">Reset</v-btn>
              </template>
            </v-data-table>

我真的很感激一些帮助和一些指导，关于如何阅读的主题，从更多的过期开发人员。 我正在使用Laravel、Vue和MySQL。

---

提前谢谢

如果您只想显示机器名称，则需要使用以下方法循环显示：

替换

<td class="text-xs-left">{{ props.item.user_machines[0].machine_name }}</td>

与

显然，如果愿意，您可以使用不同的标记而不是无序列表

或者，如果您只想显示第一个，则可以执行以下操作：

<td class="text-xs-left">{{ props.item.user_machines[0].machine_name }}</td>

---

你能显示你已经用来显示信息的代码吗？@Rosswelson你好，先生，我已经用我的getUsers和Initialize方法更新了我的帖子。你也有你的组件的HTML吗？是的，我有一个Vuetify表，我可以在其中显示数据，但现在我正在显示整个user\u machines数组，我不知道如何只显示用户\u机器->机器\u名称。如果您能显示组件的HTML和其他代码，这将是一个很大的帮助。再次感谢您花时间帮助我解决我的问题。我相信你的解决方案是正确的，但我明天就要试试，现在已经很晚了：再次感谢你，你真厉害！

<td class="text-xs-left">
    <ul>
        <li v-for="user_machine in props.item.user_machines" v-text="user_machine.machine_name"></li>
    </ul>
</td>

<td class="text-xs-left">{{ props.item.user_machines[0].machine_name }}</td>