我是否将方法中的数据推送到vuejs中的模型中?

时间:2018-04-30 21:04:15

标签: vue.js

我是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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

1)在模板中,您不必使用vm.Titlethis.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>