Vue.js 2：それぞれがJSONのリストを返す複数のパラメータ

Question

私はそうのようなAPIを持っている、に基づいて異なる要素をロードするための最良の方法は、

/api/data/foo 
/api/data/bar 
/api/data/fizz 

は、私はまた、単一の単一ページのアプリケーションを持っているオブジェクトテーブルとドロップダウンセレクタ。

<select v-model="tableChoice"> 
    <option selected>Foo</option> 
    <option>Bar</option> 
    <option>Fizz</option> 
</select> 

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th v-for="header in tableHeaders"> 
       {{ header }} 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="record in tableData" :key="record.recordId"> 
      <td v-for="element in record">{{element}}</td> 
     </tr> 
    </tbody> 
</table> 

現在、私はちょうど3つの別個のVuesを持っているので、それぞれ独自のAPI URLとテーブルヘッダーのセットを持っています。

var fooLink = 'api/foo'; 

new Vue ({ 
    el: '#app', 
    data: { 
     tableHeaders:["Record ID","Record Name", "Record Detail"], 
     tableData: null, 
     dataChoice: 'Foo' 
    }, 
    methods:{ 
     getFooData: function(){ 
      this.$http.get(fooLink).then(function(response){ 
       this.tableData = response.data; 
      }, function(error){ 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted: function() { 
     this.getFooData(); 
    } 
}); 

どのように私は、単一のテーブルまたはコンポーネントを使用し、tableChoice変数に基づいて、APIのURLは、テーブルのデータを移入するために使用されるかを決定することができますか？

コンポーネントに関するドキュメントは、小道具を使用した条件付き読み込みでは不明です。

Answer 1

<select v-model="tableChoice"> 
    <option value="foo">Foo</option> 
    <option value="bar">Bar</option> 
    <option value="fizz">Fizz</option> 
</select> 

選択ボックスの変更ハンドラを使用します。

new Vue ({ 
    el: '#app', 
    data: { 
     tableData: null, 
     tableChoice: 'foo' 
    }, 
    computed: { 
     apiUrl() { 
      switch (this.tableChoice) { 
       case 'foo': return '/api/data/foo'; 
       case 'bar': return '/api/data/bar'; 
       case 'fizz': return '/api/data/fizz'; 
      } 
     }, 
     tableHeaders() { 
      switch (this.tableChoice) { 
       case 'foo': return ['Foo']; 
       case 'bar': return ['Bar']; 
       case 'fizz': return ['Fizz']; 
      } 
     }, 
    }, 
    watch: { 
     tableChoice() { 
      this.getFooData(); 
     }, 
    }, 
    methods: { 
     getFooData() { 
      this.$http.get(this.apiUrl).then(response => { 
       this.tableData = response.data; 
      }, error => { 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted() { 
     this.getFooData(); 
    } 
}); 

Answer 2

あなたはこのようにそれを行うことができます。

<select v-model="tableChoice"> 
    <option v-for="option in options" v-bind:value="option.apiURL"> 
     {{ option.text }} 
     </option> 
</select> 

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th v-for="header in tableHeaders"> 
       {{ header }} 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="record in tableData" :key="record.recordId"> 
      <td v-for="element in record">{{element}}</td> 
     </tr> 
    </tbody> 
</table> 

スクリプト

new Vue ({ 
    el: '#app', 
    data: { 
     tableHeaders:["Record ID","Record Name", "Record Detail"], 
     tableData: null, 
     tableChoice: this.options[0].apiURL},// default selected value 
     options: [ 
      {text: 'Foo', apiURL: '/api/data/foo'}, 
      {text: 'Bar', apiURL: '/api/data/bar'}, 
      {text: 'Fizz', apiURL: '/api/data/fizz'} 
     ] 
    }, 
    methods:{ 
     getData: function(apiUrl){ 
      this.tableData = null; 
      this.$http.get(apiUrl).then(function(response){ 
       this.tableData = response.data; 
      }, function(error){ 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted: function() { 
     this.getData(this.tableChoice); 
    }, 
    watch: { 
     tableChoice(newValue){ 
      this.getData(newValue); 
     } 
    } 
});