标签: vue-resource

我正在使用Laravel并尝试学习Vue.js. 我有一个正常工作的删除请求,并从数据库中删除该对象.问题是在成功删除后没有从DOM中删除它.我正在使用该$remove方法并将其传递给完整的对象,所以我知道我错过了一些东西.

作为旁注,我有一个main.js作为组件的入口点PersonTable.vue.在PersonTable.vue持有该模板的模板和脚本.

这是我的Laravel视图:

<div id="app">
    <person-table list="{{ $persons }}">

    </person-table>
</div>

这是我的`PersonTable.vue:

<template id="persons-template">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Persons List</h1>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="person in list">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span @click="deletePerson(person)">X</span>
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>
export default {

    template: '#persons-template',

    props: ['list'],

    methods: {
        deletePerson: function(person) …

我正在使用Vue Resource从REST API检索图像集合.请求在created我的Vue组件的钩子中发送.

问题是,我正在尝试访问mounted钩子中检索到的数据,但是没有加载数据.

我在控制台中收到此错误:

[Vue警告]:挂钩时出错:"TypeError:无法读取属性'forEach'未定义"

这是我的组件:

<script>
export default {
  data() {
    return { imgs : '' };
  },
  created() {
    // the full url is declare in my main.js
    this.imgs = this.$resource('acf/v3/pages/4');

    this.imgs.query().then((response) => {
      console.log('success', response);
      this.imgs = response.data.acf.gallery;
    }, (response) => {
      console.log('erreur', response);
    });
  },
  mounted() {
    // get the ref="image" in my dom template
    let imgs = this.$refs.image;

    imgs.forEach((img) => {
      // I do some stuff with imgs …

我正在发出POST请求，但除422响应外无法获取其他任何内容。

Vue.js客户端代码：

new Vue({
  el: '#app',

  data: {
    form: {
      companyName: '',
      street: '',
      city: '',
      state: '',
      zip: '',
      contactName: '',
      phone: '',
      email: '',
      numberOfOffices: 0,
      numberOfEmployees: 0,
    }
  },

  methods: {
    register: function() {
      this.$http.post('/office-depot-register', this.form).then(function (response) {

        // success callback
        console.log(response);

      }, function (response) {

        // error callback
        console.log(response);

      });
    }
  }
});

Laravel路线：

Route::post('/office-depot-register', ['uses' => 'OfficeDepotController@register', 'as' => 'office-depot-register']);

Laravel控制器：

public function register(Request $request)
{
    $this->validate($request, [
        'companyName' => 'required',
        // ...
    ]);

    // …

我正在使用：

• Vue 2.0.3
• Vue路由器2.0.1
• vuex 0.8.2
• vue资源0.7.0

在尝试使用远程API而不是本地运行的API登录到我的页面后，出现以下错误提示：

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

现在，我已经在Azure中运行了API，并且由于它允许我测试来自Postman的调用，因此我可以肯定在后端正确设置了CORS标头。不太确定Vue和正面。

我在配置文件中有这样的情况：

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

比我叫这个动作像：

login: …

我是JavaScript和Vue.js的新手,我在使用Vue.js访问api时遇到了问题.我正在尝试访问的API具有如下所示的JSON:

{
    "coord": {
        "lon": -88.99,
        "lat": 40.51
    },
    "weather": [
        {
            "id": 800,
            "main": "Clear",
            "description": "clear sky",
            "icon": "01n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 2.09,
        "pressure": 1022.3,
        "humidity": 69,
        "temp_min": 2.09,
        "temp_max": 2.09,
        "sea_level": 1052.03,
        "grnd_level": 1022.3
    },
    "wind": {
        "speed": 12.66,
        "deg": 205.502
    },
    "clouds": {
        "all": 0
    },
    "dt": 1482203059,
    "sys": {
        "message": 0.186,
        "country": "US",
        "sunrise": 1482239741,
        "sunset": 1482273134
    },
    "id": 4903780,
    "name": "Normal",
    "cod": 200
}

它上面的API链接是有效的,但是当我运行程序时,我不认为我正在访问它.即使我不尝试解析JSON并只显示从api收集的所有数据,我的变量仍然是空的.所以,我必须做错了才能访问api.此外,在访问api之后,将像这样工作解析它:例如,访问标签"temp"=>"data.main.temp"

var weather = new Vue({ …

使用vue-resource,我们可以main.js像这样设置根URL :

Vue.http.options.root = 'http://localhost:3000/api'

我尝试将其替换为:

axios.defaults.baseURL = 'http://localhost:3000/api';
Vue.prototype.$http = axios

但是,现在我的帖子调用不能按预期工作,并Vue.http.post抛出错误.

这是如何实现的？

与上一个完整的水疗中心工作vue,vue-router,vue-resource,等发送带有VUE资源和服务器会返回一个Set-Cookie头的响应请求,但它是一个仅Http饼干,我怎么能做出这样的Cookie也与工作vue-resource要求？

当我实例化Vuejs (2.2.6)和Vue-resource (1.2.1)时,我使用以下代码设置标头授权,这样我就可以授权对我的API的所有请求:

Vue.http.headers.common.AUTHORIZATION = 'BEARER ...';

但是,我想要请求第三方API,我不希望Authorization发送该字段.此外,此API不允许您使用此授权标头.

let CEP = '';

this.$http.get('https://viacep.com.br/ws/' + CEP + '/json')
    .then(response => {
        console.log(response.headers);
    });

这样,在Access-Control-Request-Headers上使用标头发送授权字段:

我尝试使用以下代码删除一些标题字段,但没有成功.

this.$http.headers.common.AUTHORIZATION = null;
this.$http.headers.common['Access-Control-Allow-Headers'] = null;

this.$http.get('https://viacep.com.br/ws/' + CEP + '/json')
    .then(response => {
        console.log(response.headers);
    });

在vue-resource文档中,可以插入对象以强制请求配置,但文档不完整.

this.$http.get('https://viacep.com.br/ws/' + CEP + '/json', {
   ...here...
}).then(response => {
    console.log(response.headers);
});

有没有办法删除授权字段或给定请求中的任何其他字段？
谢谢.

*更新*

通过使用拦截器(如下面的示例),我可以编辑请求,但我无法删除特定字段.

Vue.http.interceptors.push((request, next) => {

    const viacep = …

我有一个使用Vue 1构建的分页组件,我正在从Laravel分页中接收数据:

<template>
    <div class="row">
        <div class="col-md-8">
          <div v-if="zeroVideos">No videos found for "{{ query }}""</div>
        </div>
        <div class="col-md-8">
          <single-video v-for="video in videos" :video="video"></single-video>
        </div>
    </div>
    <div class="row justify-content-center">
        <pages v-if="meta && videos.length && showPagination" for="videos" :pagination="meta.pagination"></pages>
    </div>
</template>

<script>
    import eventHub from '../events.js'

    export default {
        props: ['query'],
        data () {
            return {
                videos: [],
                meta: null,
                showPagination: false,
                zeroVideos: false,
            }
        },
        methods: {
            getVideos (page) {
                this.$http.get('/search/videos?q=' + this.query + '&page=' + page).then((response) => {
                    this.videos = response.data.data …

我是 VueJS 的新手，现在想用 Vue JS 重写我的纯 Javascript SPA 的一部分（仅用于培训和学习）。我使用 Vue-CLI 创建了我的项目。现在这是我的文件结构的一部分：

---src
   |---assets
       |---logo.png
   |---components
       |---loadXML.vue
       |---table01.vue
       |---table02.vue
   |---static
       |---ABC.xml
   |---app.vue

我最近在这个问题上苦苦挣扎：

我想将本地存储的 xml 文件（在静态文件夹中）加载并读取到 Vue 实例中，然后解析它并对其进行一些编辑。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        var xmlDoc = this.responseXML;
    }
}
xhttp.open('GET', 'ABC.xml', true);

import xmlFile from '../static/ABC.xml'

import jsonFile from '../static/XYZ.json'