Vue JS force re render компонент

Question

HI Я новичок в 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>

Тег Script содержит следующее

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.