标签: vue-resource

我试图了解如何正确地观察一些道具变异.我有一个父组件(.vue文件)从ajax调用接收数据,将数据放入一个对象并使用它通过v-for指令呈现一些子组件,简化我的实现:

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

...然后在<script>标签内:

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

item对象是这样的:

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

现在,在我的孩子"玩家"组件中,我正在尝试观察任何Item的属性变化,我使用:

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to …

我在main.js文件中的Vue-Resource中指定了根选项,但是当我执行请求时,它不使用root选项.我错过了什么？

这是代码:

main.js:

Vue.http.options.root = 'http://api.domain.com/v1/'

在一个组件中:

ready: function () {
    console.log(this.$http.options.root) // Correctly show 'http://api.domain.com/v1/'

    this.$http.get('/members/', null, { // FAILS because it tries to load /members/ in the current domain
        headers: {'auth-token': 'abcde'}
    }).then(function (xhr) {
        // process ...
    })
}

我究竟做错了什么 ？

我正在使用Vue.js v1.0.15和Vue-Resource v0.6.1

谢谢您的帮助.

在我的Vue.js应用程序中,我想要一些全局函数.例如callApi(),每次我需要访问我的数据时我都可以调用的函数.

包含这些功能的最佳方法是什么,以便我可以在所有组件中访问它？

• 我应该创建一个文件functions.js并将其包含在我的main.js中吗？
• 我应该创建一个Mixin并将其包含在我的main.js中吗？
• 有更好的选择吗？

我正在尝试关注本地存储:

模板:

<p>token - {{token}}</p>

脚本:

computed: {
  token() {
    return localStorage.getItem('token');
  }
}

但是当token变化时它不会改变.仅在刷新页面后.

有没有办法在不使用Vuex或状态管理的情况下解决这个问题？

我开始在我的应用程序中使用vue dev-tools,但在Chrome中的开发者模式下它是不可见的.我尝试了在dev-tools github页面和网络上其他地方找到的各种解决方案,但没有运气.以下是我已经/试图让它显示的东西.

1. allow access to file URL’s option在Chrome扩展程序中启用
2. Vue.config.debug = true; Vue.config.devtools = true;在新的Vue({})之前添加
3. 添加了非缩小版本的VueJS文件
4. 另外我使用的是Chrome最新版本:55.0.2883.87.

点击Chrome扩展程序后,我收到以下消息

除了小组实际上没有显示.

有人有解决方案吗？谢谢.

我正在使用Vuex显示'store.js'的用户列表.那个js文件有这样的数组.

var store = new Vuex.Store({
  state: {
    customers: [
      { id: '1', name: 'user 1',},
    ]
  }
})

我想在同一个数组中插入一组新值

{id:'1',名称:'用户1',}

以上值是从URL(vue-resource)获得的.下面是将获得的数据推送到数组的代码.但是,数据未插入

mounted: function() {
      this.$http.get('http://localhost/facebook-login/api/get_customers.php')
      .then(response => {
        return response.data;
      })
      .then(data => {
        store.state.customers.push(data) // not working!!
        console.log(data) // prints { id: '2', name: 'User 2',}
        store.state.customers.push({ id: '2', name: 'User 2',})
      });
    }

我对这里放置全局函数感到困惑.在很多示例中,main.js文件指向应用程序组件,并将其放在html中的某个位置.这个工作流程对我来说很好.如果我只是简单地包含我在这个app组件中的所有逻辑.但我将组件与Laravel功能相结合,所以这对我不起作用.

目前我的main.js文件包含一些方法,我需要从我的应用程序中的任何位置访问.这些方法不包含任何广播事件,因此只要它们获得vue-resource实例,它们就可以有效地放置在任何地方.

我的main.js文件:

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

希望有人可以告诉我,如果我使用vuex或者一般情况下我可以放置友谊方法,因为这似乎不是最佳实践.

谢谢.

我用这个

this.$root.$router.push({ path: '/dashboard', params: { errors: 'error' }, query: { test: 'test' } })

在我的组件中,当发生一些错误时重定向到其他URL.问题是,当我想访问params仪表板组件中的字段时,它是空的.该query领域运作良好.我正试图通过它来访问它this.$route.params.errors.

我正在尝试设置一个Vuejs前端应用程序(vue-cli webpack模板),以便放在我的Laravel API之上.

通过提供正确的身份验证令牌,我可以通过vue-resource从API获得成功的响应,例如:

methods: {
    getUser () {
      this.$http.get('http://localhost:8000/api/user', 
      {
        headers: {
          'Authorization': 'Bearer eyJ0e.....etc',
          'Accept': 'application/json'
        }
      }).then((response) => {
        this.name = response.data.name
      });
    },

但是,我现在正在尝试设置拦截器,以便为每个请求自动添加用户的身份验证令牌.

基于vue-resource自述文件我在我的尝试中main.js:

Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})

然后回到我的组件我现在只有:

this.$http.get('http://localhost:8000/api/user').then((response) => {
    this.name = response.data.name
});

问题:

当我在get自身中指定标题时,我得到了一个成功的响应,但是当我通过它时,我从服务器interceptor返回一个401 Unauthorized.我怎样才能解决这个问题,以便在使用拦截器时成功响应？

编辑: 当我使用dev-tools查看传出请求时,我看到以下行为:

通过提供标头来发出请求时$http.get,我发出了一个成功的OPTIONS请求,然后成功GET请求,并将Authentication标头提供给GET请求.

但是,当我从$http.get直接删除标题并将它们移动到拦截器时,我只发出一个GET请求并且 …

我想知道在呈现页面之前,我想向服务器发送异步GET请求以检索数据并填充数据中的属性.我听说最好的方法是调用在三个生命周期钩子之一中发送此请求的函数,Vue js提供在呈现DOM之前运行.三是beforeCreate(),created(),beforeMount().理想情况下,哪个请求必须被调用？为什么？