Counter

Hi 

For hide/show the form elements using Owl, use the following code:

OWL:/** @odoo-module **/

import { Component, useState, useRef } from "@odoo/owl";

export class Counter extends Component {

    static template = "CounterTemplate";

    setup() {

        // Creates a reference to a DOM element within the component

        this.counterRef = useRef("counterRef"); // for getting the doc element

        this.state = useState({

            counter: 0,

            show: false, // for show and hide the div

        })

    }

    showAndHideField() {

        //it is the method using useRef

        // you can hide the element by adding class

        this.counterRef.el.classList.add('d-none');

        // you can show the element by removing class

        this.counterRef.el.classList.remove('d-none');

        // it is a method using useState

        // If you don't want to use this method, you can render

        // elements conditionally by using useState hook I provide that below

        this.state.show = !this.state.show;

        // if you can change the value in the input box

        // you can alter the value in the state.counter

        this.state.counter = 1;

    }

}

XML:

<t t-name="CounterTemplate">

    <h1>Counter</h1>

    <div class="counter_button">

        <button t-on-click="showAndHideField">Show</button>

    </div>

        <!--here I added t-if to render this particular div conditionally

        if the value of show is true it rendered   -->

    <div t-if="state.show" class="show-counter" ref="counterRef">

        <input t-model="state.counter" type="text" class="form-control" id="counter"/>

    </div>

</t>

Hope this helps.