财产不改变价值答案

【问题标题】：Property doesn't change value财产不改变价值
【发布时间】：2022-01-15 12:12:54
【问题描述】：

我正在制作一个基本表单，我想让按钮仅在所有字段都有效时才可见。

模板：

<template>
  <main>
    <form @submit="send" method="POST">
      <input id="name" type="text" placeholder="Nome" required minlength="3" maxlength="25" v-model="nome" @input="checkName" />
      <div class="err">{{errName}}</div>
      <input id="lastName" type="text" placeholder="Cognome" required minlength="3" maxlength="25" v-model="cognome" @input="checkLastName" />
      <div class="err">{{errLastName}}</div>
      <input id="email" type="email" placeholder="Email" required minlength="7" v-model="email" @input="checkEmail" />
      <div class="err">{{errEmail}}</div>
      <input id="password" type="password" placeholder="Password" required minlength="3" maxlength="25" v-model="password" @input="checkPass" />
      <div class="err">{{errPass}}</div>
      <button :style="buttonStyle" type="submit">INVIA</button>
    </form>
  </main>
</template>

脚本（仅数据（））：

data() {
    return {
      nome: '',
      cognome: '',
      email: '',
      password: '',

      errName: '',
      errLastName: '',
      errEmail: '',
      errPass: '',

      validName: false,
      validLastName: false,
      validEmail: false,
      validPass: false,

      validForm: (this.validName && this.validLastName && this.validEmail && this.validPass),
      buttonStyle: (this.validForm) ? 'display: block' : 'display: none'
    }
  }

我期待 this.validForm 在所有其他人都为真后变为真，但相反，无论我做什么，它都保持假。

我尝试过的一些事情：

将所有 valid* 设置为 true // 不起作用

validName: true,
validLastName: true,
validEmail: true,
validPass: true,

将 validForm 设置为 true // 不起作用

validForm: true,
buttonStyle: (this.validForm) ? 'display: block' : 'display: none'

在buttonStyle 上交换返回 // 显示按钮

buttonStyle: (this.validForm) ? 'display: none' : 'display: block'

正如我所说，最后一次尝试实际上显示了按钮......但这显然不是我想要的。
我是 Vue 新手，所以我仍在学习所有功能。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

您好，首先在您需要的表单标签处 @submit.prevent='submit'。对于 data() 的错误，您可以创建数组 error:[] 并使用唯一名称推送输入错误。

（如果你想这样做，errors:[] 需要为空）

在按钮标签处

<button :diabled="errors.length !== 0">sadasasd</button>

（如果data() 中的errors.length 不为0，则为true，否则为false）。

但是你应该使用 vuex 并在那里存储错误。

希望能解决你的问题

【讨论】：

【解决方案2】：

总结：

在没有看到您的任何逻辑的情况下，我无法告诉您如何修复布尔值，但您应该使用 v-if 来代替使用 buttonStyle 属性。

v-if 将使您的组件仅在其内部的布尔值为真时呈现。

示例：

var isTrue = true;


<button v-if='1 < 2'></button>      // Will Render
<button v-if=isTrue></button>       // Will Render
<button v-if='1 + 1 == 7'></button> // Will NOT Render

文档：

如果您想了解更多，请查看以下文档：

https://vuejs.org/v2/guide/conditional.html

【讨论】：