'Vue 3 Composition API - Cannot create property 'value' on boolean 'false'
I'm trying to set up error handling with the Vue Composition API with the script tag.
I want to display an error depending on whether the property 'error' is true or false -
<p class="form__error-message" v-if="error">
{{ errorMsg }}
</p>
let error = ref(false);
let errorMsg = ref("");
I have an input field in my form that should only accept non-Latin characters and thus display an error when a Latin character is entered into the input field (which it does) -
const checkAgainstLatinChars = ($event) => {
const latinCharacters = /^[A-Za-z0-9]*$/.test($event.target.value);
if (latinCharacters && $event.target.value !== "") {
error.value = true;
errorMsg.value = "Please don't type latin characters in the Chinese inputs. 🙎";
} else if ($event.target.value === "" || !latinCharacters) {
error = false;
errorMsg.value = "";
}
};
However, since I'm now using the composition API, I need to wrap the error property around a ref and then reference the property with .value... right?
This does actually kinda work because the error message does display but I get two problems along with it -
Even though the error message does show, the input doesn't recognize the first keystroke so nothing visibly appears in the input field.
I get the following error in my console -
Uncaught TypeError: Cannot create property 'value' on boolean 'false'
All of this was working fine when using the Options API, why am I having problems now and what do I need to do to resolve them?
Thank you
*** Edit ***
Here is how the input element is being handled to give number 1 some more context -
const state = reactive({
traditional: "",
simplified: "",
pinyin: "",
english: "",
});
<input
name="traditional"
@input="setTraditional"
:value="traditional"
type="text"
class="form__input"
placeholder="電腦"
required
/>
const setTraditional = ($event) => {
state.traditional = $event.target.value;
checkAgainstLatinChars($event);
};
Number 1 was fixed by changing name="traditional" to name="state.traditional" and number 2 was fixed by removing error = false from the setTraditional function
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
