Vue.js 2：基于多个参数加载不同元素的最佳方式

Question

我有一个这样的 api，每个都返回一个 json 对象列表

/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 个像这样的独立 Vue，每个都有自己的 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);
        }
    }
});