How to conditionally display textboxes based on the value selected from a drop down

#1

Hi, I am new to vue.js and I really appreciate an answer for my question.
I wanted to display textboxes based on the value I selected from “select”
I have a table and my dropdown and text boxes are in different tabledata cells. Because of that I cannot use v-if to display textboxes conditionally .
"input type=“text” v-if=“el.category ===‘FRUIT’” required "is not working, because my text boxes and dropdown are in different cells .
Please see my code.

<table>

    <tr>

        <td>

            <select>

                <option v-for="el in TYPES" :value="el.name" :key="el.name">{{ el.name }}</option>

            </select>

        </td>

        <td>

            <input type="text" v-if="el.category ==='FRUIT'" required />

        </td>

        <td>

            <input type="text" v-if="el.category ==='VEGITABLE'" required />

        </td>

        <td>

            <b-button variant="danger">Remove</b-button>

        </td>

    </tr>

</table>