Level 47
what's in your script tag?
Feb 15, 2023
4
Level 51
@focus not working after vite build
Hi
I was working on autocomplete search for multiple input fields. In development it is working fine while running npm run dev.
After building project using npm run build It is not working.
<input
required=""
type="text"
name="text"
autocomplete="off"
class="input"
v-model="customer.phone"
@focus="phoneFocus = true"
@blur="phoneFocus = false"
/>
<div v-if="phoneFocus">
search result here
</div>
<input
required=""
type="text"
name="text"
autocomplete="off"
class="input"
v-model="customer.name"
@focus="nameFocus = true"
@blur="nameFocus = false"
/>
<div v-if="nameFocus">
search result here
</div>
The problem is when I start searching in one input field Other search result also displaying
Level 51
@MaverickChan this is my script tag
<script setup>
import { reactive,watch } from "vue";
const customer = reactive({
phone: "",
name : "",
});
const phoneFocus = reactive(false);
const nameFocus = reactive(false);
watch(
() => customer.phone,
() => {
searhCustomers("phone", customer.phone);
}
);
watch(
() => customer.name,
() => {
searhCustomers("name", customer.name);
}
);
const searhCustomers = debounce((key, value) => {
axios
.post(URL + "/search-customers", {
key,
value,
})
.then((res) => {
//update search result
})
.catch((err) => {
console.log("error", err);
});
}, 500);
</script>
Level 47
@shariff so what is phoneFocus and nameFocus?
Level 51
@MaverickChan sorry I forgot to add that. I have updated the script now. phoneFocus and nameFocus are boolean type
Please or to participate in this conversation.