i've created application takes address or city , displays favorited tweet @ location using vuejs. i've written 3 methods each thing needs happen.
first, grab auth key url fragment. second, pass address google's api cordinates. finally, use key , location first 2 methods make final api request content want.
as stands have 3 buttons appear on appropriate step , trigger method @click. there way trigger sequence of methods @click? seems may able use $emit chain them new developing on web , don't understand i've read far.
id have 1 button three. solution stands:
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title></title> </head> <body> <div id="app"> <button @click="method1">button 1</button> <button @click="method2">button 2</button> <button @click="method3">button 3</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"> </script> <script> new vue({ el: "#app", methods: { method1: function(){ alert("first thing happened"); }, method2: function(){ alert("second thing happend"); }, method3: function(){ alert("third thing happened") } } });
if weren't relying on asynchronous api call, have created method fired off 3 sequentially , bound @click that. because waiting on ajax call, though, $emit() , custom event handling way go. let pass data between methods, (in case api call dependent on result of auth key extraction, et cetera).
new vue({ el: "#app", methods: { method1: function() { var resultofmethod1 = "foo "; alert( "resultofmethod1: " + resultofmethod1 ); this.$emit( "ready.method1", resultofmethod1 ); }, method2: function( token ) { var resultofmethod2 = token + "bar "; alert( "resultofmethod2: " + resultofmethod2 ); this.$emit( "ready.method2", resultofmethod2 ); }, method3: function( token ) { var resultofmethod3 = token + "baz "; alert( "resultofmethod3: " + resultofmethod3 ); } }, events: { "ready.method1": function ( token ){ this.method2( token ); }, "ready.method2": function ( token ){ this.method3( token ); } } });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <div id="app"> <button @click="method1">button 1</button> </div>
Comments
Post a Comment