Question

我创建了一个应用程序，它使用地址或城市，并使用Vuejs在该位置显示最受欢迎的推文。我已经为每件需要发生的事情写了三种方法。

首先，我从url片段中获取一个auth密钥。第二，我将地址传递给google的api以获得坐标。最后，我使用前两种方法中的键和位置来制作最终的Api请求以获取我想要的内容。

目前我有三个按钮出现在相应的步骤上并用@click触发他们的方法。有没有办法用@click触发一系列方法？似乎我可以使用$ emit将它们链接在一起，但我不熟悉在网上开发并且不完全理解我到目前为止所阅读的内容。

我想只需要一个按钮就可以完成所有三个按钮。我的解决方案：

<!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")
        }
    }
});

Answer 1

我认为使用Promise（http://www.html5rocks.com/en/tutorials/es6/promises/）会更简单直观。 Promises已经存在了一段时间，但旧的IE（http://caniuse.com/#feat=promises）不支持它们。但是，你可以使用polyfill。

我大约6个月前开始使用它们，它们非常强大，并且与vue-resource（https://github.com/vuejs/vue-resource）相结合，它们真是太棒了。你的代码看起来像这样：

new Vue({
    el: "#app",

    methods: {
        method1: function(){
            this.$http(authCallUrl, data1)
            .then(function (response) {
               console.log('First call was successful', response);
               return this.$http(googleApiURL, data2);
            })
            .then(function (response) {
              console.log('Second call was successful', response);
              return this.$http(finalAPIRequestURL, data3);
            })
            .then(function (response) {
              console.log('Everything was top-notch', response);
            })
        }
    }
});

我知道这似乎是很多新事物，但相信我，Promises会让你的生活大有改善！

干杯！

Answer 2

如果您不依赖于该异步API调用，那么您可以创建一个方法，按顺序触发所有这三个并将@click绑定到该方法。但是，由于您正在等待AJAX调用，因此$emit()和custom event处理可能是最佳选择。这将允许您在方法之间传递数据（如果您的API调用取决于您的auth密钥提取的结果，等等。）

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>

在Vue.js

2 个答案: