vuejs2 - VFOR Loop 无法访问全局服务器链接

问题描述

我有一个 vue.js 2.0 应用程序，

将我的服务器 url 注册为全局变量，如下所示main.js：

Vue.server = Vue.prototype.server = "http://localhost:3000/";

现在，我正在尝试在v-for 循环内显示一些图片，在 vue 组件文件users.vue 内：

 <div v-for="user in users" class="col-sm col-xs-12">
            <div class="card " style="margin-bottom : 20px">
                <img v-bind:src="this.server + user.img   "   class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{user.nom}}</h5>
                    <p class="card-text">Voici la description de mon profil .</p>
                    <a v-on:click="route(user._id)" class="btn btn-primary float-right">Profil</a>
                    <!-- <span class="badge badge-warning"> {{ info }}</span>  -->
                </div>
            </div>
        </div>

我有这个错误：

TypeError: "this is undefined"

V-for 不接受我的 this.server 变量。

如何在 v-for 循环中访问我的全局 URL ？（PS：我可以在任何经典模板上访问 this.server，除了 v-for）

编辑：像这样解决了我的问题：

div v-for="user in users" class="col-sm col-xs-12">
            <div class="card " style="margin-bottom : 20px">
                <img v-bind:src="gettinSrv() + user.img   "   class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{user.nom}}</h5>
                    <p class="card-text">Voici la description de mon profil .</p>
                    <a v-on:click="route(user._id)" class="btn btn-primary float-right">Profil</a>
                    <!-- <span class="badge badge-warning"> {{ info }}</span>  -->
                </div>
            </div>
        </div>

使用这种方法：

 methods: {
        gettinSrv: function () {
          return this.server;
        }

编辑2： KCP有正确答案，请忘记编辑1，谢谢！

标签： vuejs2

vuejs2 - VFOR Loop 无法访问全局服务器链接

问题描述

解决方案

推荐阅读