javascript - Começando com vue-resource
Tendo dificuldade em encontrar exemplos prontos de uso para o plugin vue-resource do vue.js, eu tentei isto:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
<div id="my_view">
<p>{{ origin }}</p>
</div>
<script>
var Vue = require('vue');
Vue.use(require('vue-resource'));
new Vue({
el: '#my_view',
data: {
origin: ''
},
ready: function() {
// GET request
this.$http.get('http://httpbin.org/ip', function (data, status, request) {
// set data on vm
this.$set('origin', data)
}).error(function (data, status, request) {
// handle error
})
}
})
</script>
apenas consultar httpbin.org/ip (um endpoint REST aleatório que eu poderia encontrar) e exibir o resultado dentro de #myview > p. É apenas o exemplo (uma versão adaptada) fornecido na página do GitHub do vue-resource que estou tentando executar.
Alguém consegue ver o que eu não estou fazendo certo para conseguir isso?
Editar: adicionei a vírgula, e aqui está o fiddle disso.
Resposta #1
É porque você está usando require. Se você usar require, você precisa de alguma biblioteca como http://browserify.org/
Este exemplo agora está funcionando: http://jsfiddle.net/dccbbkam/2/
E aqui está outro exemplo para você: http://jsfiddle.net/dccbbkam/4/