Question

我是Vue js的新用户和我的用例我正在显示一个组件，每次用户点击单击按钮时，组件内的内容都应该更改，但我无法执行此操作。

以下是代码段。

<b-form inline>
            <h2>Search</h2>
            <b-form-select class="mb-2 mr-sm-2 mb-sm-0"
                           size="lg"
                           v-model="selected"
                           :value="null"
                           :options="options"
                           id="dropdown">
                <option slot="first" :value="null">Select...</option>
            </b-form-select>
            <b-form-input size="lg" v-model="input"/>
            <b-button v-on:click="searchData" size="lg" variant="primary">Search</b-button>
        </b-form>
        <div v-if="this.isRenderTable">
            <generic-table :dataInfo="this.tableData"/>
        </div>
        <div v-else></div>

脚本标记包含以下内容

data() {
            return (
                {
                    selected: null,
                    input: null,
                    tableData: null,
                    isRenderTable: false,
                    options: {
                        'mysql': 'My SQL',
                        'oracle': 'Oracle',
                        'all': 'All'
                    },
                })
        },
        methods: {
            searchData: function () {
                this.tableData = '{"type":"' + this.selected + '","keyword":"' + this.input + '"}'
                this.isRenderTable = true;
            }
        }

In my Generic Table component i am rendering the value to the table.

        <b-table responsive="sm" selectable
                     @select="updateState"
                     :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
                <template slot="name" slot-scope="data">
                    <b-button v-b-modal.modal1 size="sm" variant="link" v-on:click="updateState(data.item)">
                        {{data.item.name}}
                    </b-button>
                </template>
            </b-table>

我的数据取决于用户的选择。第一次它工作正常但下次没有显示新数据。

还有其他方法可以达到这个目的。非常感谢

Answer 1

<template>
    <component v-if='toggle' />
</template>

您可以通过使用v-if切换组件来强制重新渲染。

Vue JS强制重新渲染组件

1 个答案: