How do I show clear-button when the input has focus?

    <f7-list-input
                        type="text"
                        :value="customer.first_name"
                        @input="customer.first_name = $event.target.value"
                        :clear-button="focusedInput === 'first_name'"
                        @focus="focusedInput = 'first_name'"
                ></f7-list-input>

I want clear-button to appear only when it has focus.
Is :clear-button=“focusedInput === ‘first_name’” @focus=“focusedInput = ‘first_name’” the proper way to do that?

Yes, it is correct way