我有一个vue.js 2.0应用程序
将我的服务器网址注册为全局变量,例如在 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,谢谢!
答案 0 :(得分:0)
这只是一个简单的语法错误。
只需在server
循环内使用this.server
而不是v-for
。