Allow me to get straight to the point - I'm facing an issue where I can't interact with <input> or <v-text-field> in my project.
I've opted for Vue 2 and vuetify 2.6 for developing my frontend application.
For some reason, I am unable to type or interact with any input fields in my project. It appears as if every input is disabled, even though it's not set that way.
Below, you'll find some code snippets that I hope can shed light on the issue:
<template>
<section class="main-container">
<div class="newsletter-card">
<h2>Check out our latest updates through our newsletter.</h2>
<p class="body-large">Stay tuned, the first subscribers will have access to exclusive giveaways.</p>
<div class="div-form">
<v-form v-model="valid">
<v-text-field v-model="form.email" solo label="Solo" clearable></v-text-field>
</v-form>
</div>
<p class="small-paragraph">*By submitting your email address, you are confirming your subscription to our newsletter.</p>
<img class="img-spine"
src="https://res.cloudinary.com/dpwcbwkzl/image/upload/v1666993740/development/line-vector-desk_1_l8ofkk.png"
alt="">
</div>
</section>
</template>
<script>
export default {
name: "NewsletterComponent",
data: function () {
return {
valid: false,
form: {
email: "",
}
}
}
}
</script>
https://i.sstatic.net/AgGJT.png
Considering that I'm unsure whether the problem lies within the component itself or a misconfiguration in Vue.js, I've shared my package.json and main.js files. Perhaps there's a dependency conflict causing this issue.
{
"name": "omnilaw-front-end",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@types/node": "^18.8.0",
"@vue/composition-api": "^1.7.1",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@volar-plugins/vetur": "latest",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-unit-mocha": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/test-utils": "^1.1.3",
"chai": "^4.2.0",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.0.3",
"eslint-plugin-vuejs-accessibility": "^1.1.0",
"prettier": "^2.7.1",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
}
}