javascript Vue.js无法在表单输入中写入任何内容

rjzwgtxy  于 2022-10-30  发布在  Java
关注(0)|答案(1)|浏览(192)

我就开门见山了,在我所有的项目中,我都不能用<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.jsonmain.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": {}
  }
}
nbysray5

nbysray51#

我做了一个最小的reproduciton sandbox,它和预期的一样工作。唯一缺少的是你的CSS类定义,我认为这是你在这种情况下的问题。
您的某个类中可能有pointer-events: none
如果你想保持类不变,你可以添加内联样式到你的表单中,或者像这样封闭<div>style="pointer-events: all"
如果这样做没有修复它,并且您仍然没有在开发工具控制台中得到任何错误,那么我将检查该元素,看看哪些类/样式被应用到它,并返回报告。

相关问题