标签: vue-resource

我正在查看以下vue-resource文档,该文档描述了如何设置配置:https: //github.com/vuejs/vue-resource/blob/master/docs/config.md

它说要使用通用授权值设置标头:

 Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

我猜这个"基本的YXBpOnBhc3N3b3Jk"值只是一个例子,但是这个值是什么,应该用什么而不是它呢？

在同一页面上,我还看到了"root"的设置:

 Vue.http.options.root = '/root';

我理解这是指Web应用程序的Web URL.但是,为什么vue-resource需要我告诉它这个值呢？它用于什么？

感谢您阅读我的问题.

我已经读过我的问题

VUE JS 2 + WEBPACK无法读取未定义的VUE RESOURCE属性'get'

但我的系统没有读取Vue var :(

我有一个vue组件调用app.vue,我需要使用vue-resource从我的帖子中获取数据.但错误很多次是:

TypeError: Cannot read property 'post' of undefined
at VueComponent.loadingProcess

你有想法解决它吗？

我的app.vue

<script>
    var Vue = require('vue');
    //Vue.use(require('vue-resource'));
    //Vue.use();

    export default {
          data () {
                return {
                    msg: 'Hello from vue-loader! nice!',
                    user: {}
            }
    },
    mounted: function () {
        this.loadingProcess();
    },
    methods: {
        loadingProcess: function () {

            var urlPost;
            var answQSend = {...};
            var that = this;

            var jsonSend = {
                "form_data": answQSend,
                "prod_id": 3
            };

            Vue.$http.post(urlPost, jsonSend, …

大家好，我正在vuex一侧的动作中尝试执行一个请求，但出现此错误：

Cannot read property '$http' of undefined

我在main.js文件中以这种方式设置vue资源：

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes';
import {store} from './store/store';
import VModal from 'vue-js-modal'

Vue.use(VModal)
Vue.use(VueResource);
Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

然后在商店：

addStyle(state,newStyleObj) {
    console.log(newStyleObj);
    var vm = this;
    this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj)
        .then(response => {
            state.tableStyles = response.body;
            console.log(state.tableStyles)
            console.log(response.body)
        }, error => {
            console.log(error); …

使用vue-resource我可以从api中获取数据并进行设置，以便可以在html中使用它，我的问题是我想在v-for完成后运行jquery函数，以便jquery可以看到dom中的元素，这是我的代码：

js

dataUrl = "http://localhost:8081/hesabiha/userSubmissions";

var app = new Vue({
  el: "#campaign",
  methods: {
    getSubmissions: function(){
      this.$http.get(dataUrl, function(submissions){
        this.$set('submissions', submissions);
      });
    },
  },

  ready: function(){
    this.getSubmissions();
  }
});

html

<div v-for="item in submissions" class="grid-item">
    <img v-bind:src="item.field_image[0].url" alt="Hello">
</div>

我正在尝试对我的页面运行此功能：

$('.grid').masonry({
    // options...
    itemSelector: '.grid-item',
    columnWidth: 200
  });

它不起作用，无论如何，所以我可以在v-for完成后运行此jquery函数吗？

我正在尝试使用vuex将一个数组从我的api拉到一个组件,但是我很茫然,并且可能在我的脑海中尝试这个.随着api直接从一个组件访问我有它设置像这样,它很好:

data () {
 return {
  catalog:[],
 }
},
created() {
 this.$http.get('https://example.net/api.json').then(data => {
  this.catalog = data.body[0].threads;
 })
}

作为参考,json看起来类似于:

[{
"threads": [{
 "no: 12345,
 "comment": "comment here",
 "name": "user"
}, {
 "no: 67890,
 "comment": "another comment here",
 "name": "user2"
}],

//this goes on for about 15 objects more in the array

 "page": 0
}]

当我把这一切都移到商店时,我正在失去对如何实现这项工作的把握.我之前从未使用过vuex资源.

//store.js

state: {
    catalog: []
},
actions: {
    getCatalog({commit}){
        Vue.http.get('https://example.net/api.json').then(response => {
            commit('LOAD_CATALOG', response.data.data)
        });
    }
},
mutations: {
    LOAD_CATALOG (state) {
        state.catalog.push(state.catalog)
    } …

我已经形成了人们提交数据的地方，然后使用ajax将数据发送到服务器。我已将其设置为Google Adwords中的转换。下面是我使用的代码。

问题是，当用户提交表单时，在获得响应后，其重定向回我给出的URL。我不想重定向！

（由于此项目在VueJS中，因此提交的数据使用Vue资源）

submit() {
  let self = this
  this.$validator.validateAll().then(success => {
    if (!success) {
      return;
    }
    document.getElementById("submitQuote").value = "Submitting...";
    this.$http.post(store.state.url+'api/submit_quote.php', {
        formData: store.state.formData
      })
      .then(response => {
        console.log(response.data)
        this.submitted = true
        self.reference_id = response.data
        goog_report_conversion('https://www.example.com/') //report Google that a conversion has occured
      });
  });
}

Google提供的代码

<!-- Google Code for Add to Cart Conversion Page
    In your html page, add the snippet and call goog_report_conversion
    when someone clicks on the chosen link or button. -->
    <script type="text/javascript">
     /* …

如何使用 vue-resource 完成以下任务：

1. 从服务器获取数据时包括预加载器文本 Loading... 或 gif 图像。
2. 在表单提交上显示成功消息。

我正在尝试开发 Vue.js 应用程序。在这方面，我正在此应用程序中上传文件。现在我想为该文件上传功能开发一个进度条。我正在尝试按照教程进行操作。在这里，我得到了axios用于上传文件的库。代码如下

axios.post("/upload.php",fd,{
    onUploadProgress: function() {
       //code here
    }
})

但我正在使用vue-resource. 如何检测上传进度vue-resource？

如何在 Ajax 调用中访问响应数据？如果我登录，response.text()它会显示一个PromiseObj.

安慰

PromiseObj
  context: undefined
  promise: Promise {status: "resolved", result: ")]}',?{\"Result\":\"SUCCESS\",\"Data\":{\"mode\":\"DEV\"}}"}

代码

this.$http.post(endpoint, data, []).then((response) => {
    console.log(response.status);
    console.log(response.text());
}, (response) => {
    console.log(response.status);
    console.log(response.json());
});

我有以下下载文件的请求（使用vue-resource）：

this.$http.get(fileUrl, { responseType: 'arraybuffer' }).
    then(
        (response) => {
            let blob = new Blob([response.data], { type: response.headers.get('content-type') });
            let link = document.createElement('a');
            link.setAttribute("type", "hidden");
            link.href = window.URL.createObjectURL(blob);
            let disposition = response.headers.get('content-disposition');
            let matches = /.*filename=(.*);.*/.exec(disposition);
            let filename = (matches != null && matches[1])
                ? matches[1]
                : 'file';
            if (filename.startsWith('"')
                && filename.endsWith('"')) {
                filename = filename.substr(1, filename.length - 2);
            }
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            link.remove();
        },
        (errorResponse) => {
            // TODO: errorResponse doesn't actually have the error …