Vueify с vue-ресурсом

Кажется, я не могу заставить vue-resource работать с vueify. Я определил один компонент vue, который я включаю в свой файл main.js.

import Vue from 'vue'
import MyComponent from './my-component.vue'

new Vue({
    el: '#app',
    components: {
        myComponent: MyComponent
    }
});

Мой файл компонента vue выглядит так:

<script>
    import Vue from 'vue';
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource);

    export default {
        template: '#my-component-template',

        created: () => {
            Vue.$http.get('/my/api/123',
                data => {
                    console.log(data)
                }, err => {
                    console.log("Error");
                    console.error(err);
                }
            );
        }
    }
</script>

В текущем состоянии я получаю эту ошибку:

Uncaught TypeError: Cannot read property 'get' of undefined

Если я закомментирую две строки, касающиеся vue-resource в моем файле компонента, ошибка, которую я получаю, выглядит следующим образом:

Uncaught TypeError: Cannot redefine property: $url

пакет.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "^1.0.3",
    "vue": "^1.0.25",
    "vue-resource": "^0.8.0"
  }
}

глоток:

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});

Все существующие ответы на SO не принесли никаких результатов. Пожалуйста помоги.


vue.js laravel vue-resource browserify laravel-elixir
person chrisg86    schedule 22.06.2016    source источник
comment
Вы по-прежнему получаете сообщение об ошибке, если раскомментируете Vue.use(VueResource); ?   -  person Frisbetarian    schedule 22.06.2016
comment
Спасибо за ваш ответ. Да, я получаю: Uncaught TypeError: Cannot read property 'get' of undefined   -  person chrisg86    schedule 22.06.2016
comment
Ошибка переопределения обычно возникает из-за того, что вы дважды включили vue-resource где-то в своем приложении. Вы случайно не импортируете свой файл vue-resource с помощью elixir, а также с npm? Может быть, выложите это на github, если вы действительно боретесь, чтобы мы могли посмотреть.   -  person Stephan-v    schedule 22.06.2016
comment
Сделаю это, как можно скорее.   -  person chrisg86    schedule 22.06.2016
comment
Оказывается, у меня все еще был оставшийся тег script в моем файле макета, который включал vue-resource. Теперь в сочетании с ответом Пантелиса Песлиса у меня все заработало.   -  person chrisg86    schedule 23.06.2016

Ответы (3)


arrow_upward
4
arrow_downward

Вы должны заменить $http на http:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  created: () => {
    Vue.http.get(...)
  }
}

Кроме того, рекомендуется установить VueResource в файл main, а затем мы могли бы использовать ключевое слово this, как сказал @Jeff.

Для этого вы должны изменить arrow function, потому что this относится к глобальному объекту:

// refers to the global object
created: () => {}

// refers to the Vue component
created () {
  this.$http.get(...)
}
person Pantelis Peslis    schedule 22.06.2016
comment
Хороший намек на глобальный объект и привязку this, спасибо - person Yerko Palma; 23.06.2016
comment
Замена $http на http не решила проблему. Но изменение функций стрелок помогло. У меня также был оставшийся тег script в моем файле макета, который включал vue-resource. - person chrisg86; 23.06.2016
comment
Чтобы работать с Vue.http, вы должны импортировать Vue, как описано в вопросе, и правильно установить VueResource. - person Pantelis Peslis; 23.06.2016

arrow_upward
3
arrow_downward

Вы пытались добавить var VueResource = require('vue-resource'); в свой экземпляр root vue? также добавьте Vue.use(VueResource).

person ishadif    schedule 22.06.2016

arrow_upward
1
arrow_downward

Как только вы добавите плагин в main.js с помощью Vue.use(VueResource), он добавит атрибут $http ко всем экземплярам Vue. Вам не нужно повторно делать это в файле компонента. Затем вы просто используете this.$http:

    created: () => {
        this.$http.get('/my/api/123',
            //...
        );
    }
person Jeff    schedule 22.06.2016
comment
Спасибо за Ваш ответ. К сожалению, это также возвращает ошибку Uncaught TypeError: Cannot redefine property: $url - person chrisg86; 22.06.2016