如何在 Vue.js 中连接两个变量

【问题标题】：How to connect two variables in Vue.js如何在 Vue.js 中连接两个变量
【发布时间】：2018-03-09 02:46:30
【问题描述】：

我正在使用 laravel + vue 构建项目。目前我从控制器返回数据以查看 - 用户和 user_datas。如何连接这两个变量，然后在 v-for 中一起显示？

在 laravel 中使用关系连接两个表。

【问题讨论】：

请出示您的代码。
没有什么可显示的。我需要知道该怎么做。例如，如果可能的话，使用 json_encode 连接它等。
你绝对可以展示你是如何在 Vue 中引用数据的，以及你到目前为止所做的尝试。然后，在还添加了对未按预期工作的解释之后，这将为潜在的回答者提供更多的上下文，而不是简单地询问如何从 laravel “连接两个变量”然后在 Vue 中“一起显示”（这是一个相当广泛的问题）。

【解决方案1】：

您可以使用 laravel 关系，并获取单个变量中的数据。那么就不需要合并两个变量了。你可以在你的用户模型中这样做：

public function user_data() {
    return $this->hasMany('App\UserData');
}

UserData 将是您将与之创建关系的第二个模型。

在控制器中你会这样写：

 $users = User::with('user_datas')->get();
 return response()->json(['data'=>$users]);

然后在你的 vue 文件中

<div v-for="user in users">
    <h1>{{user.first_name}}</h1>
    <ul>
        <li v-for="user_data in user.user_datas">{{user_data.title}}</li>
    </ul>
</div>

【讨论】：