我就开门见山了,在我所有的项目中,我都不能用<input>
或<v-text-field>
来写。
我选择了Vue 2和vuetify 2.6来做我的前端应用程序。
我不知道为什么它是不可能的interect或在所有项目的任何输入类型,看起来像是每个输入是“禁用”,甚至它不是.
那么我们开始吧,我将分享一些代码,希望你能帮助我:
<template>
<section class="main-container">
<div class="newsletter-card">
<h2>Confira as novidades através de nossa newsletter.</h2>
<p class="body-large">Fique de olho, os primeiros assinantes participarão
de sorteios exclusivos.</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">*ao submeter o seu endereço de e-mail, você está confirmando que aceita se
inscrever
em nossa 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>
因为我不知道问题是在组件本身还是在配置中的vuej。我将共享我的package.json
和main.js
,可能是发生了依赖冲突。
{
"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": {}
}
}
1条答案
按热度按时间nbysray51#
我做了一个最小的reproduciton sandbox,它和预期的一样工作。唯一缺少的是你的CSS类定义,我认为这是你在这种情况下的问题。
您的某个类中可能有
pointer-events: none
。如果你想保持类不变,你可以添加内联样式到你的表单中,或者像这样封闭
<div>
:style="pointer-events: all"
如果这样做没有修复它,并且您仍然没有在开发工具控制台中得到任何错误,那么我将检查该元素,看看哪些类/样式被应用到它,并返回报告。