我是vuejs的新手并且正在查询来自rest api的数据,但是在方法部分。我想知道我是否应该将数据从Ajax方法推送到数据模型以便在标记中进行条件呈现?如果是这样,我该如何正确地做到这一点?
new Vue({
el: "#app",
data: {
items: [],
Title: ""
},
created: function() {
this.getCurrentUser();
},
methods: {
getCurrentUser: function() {
var root = 'https://example.com';
var headers = {
accept: "application/json;odata=verbose"
}
var vm = this;
var __REQUESTDIGEST = '';
$.ajax({
url: root + "_api/web/currentuser",
type: 'Get',
headers: headers,
success: function(data) {
vm.Title = data.d.Title;
console.log(vm.Title)
if (vm.Title == "Marks, Wendy" || "Adams, Todd") {
document.getElementById("admin").style.display = "block";
}else
{
document.getElementById("admin").style.display = "none";
}
}
})
},
}
})

`<div id="#app">
<span v-if="vm.Title=='bourg,wallace'">Hello!</span>
</div>`
&#13;
答案 0 :(得分:1)
1)在模板中,您不必使用vm.Title
或this.Title
作为序言。
2)您需要将span包装在id为“app”的内容中,以便将数据绑定注入el: #app
。
您可以尝试以下代码段,然后检查Vue Guide for Data/Methods有关Vue数据/方法的工作方式:
new Vue({
el: "#app",
data: {
items: [],
Title: ""
},
created: function() {
},
methods: {
getCurrentUser: function() {
let root = 'https://example.com';
let headers = {
accept: "application/json;odata=verbose"
}
let vm = this;
let __REQUESTDIGEST = '';
setTimeout(
function(data) {
vm.Title = 'bourg,wallace'
}
, 1000)
},
}
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<button @click="getCurrentUser">Change User</button>
<span v-if="Title=='bourg,wallace'">Hello!</span>
</div>