时间戳

首页 > 解决方案 > 在 Vue 中创建条件输入字段组件

vue.js - 在 Vue 中创建条件输入字段组件

问题描述

我正在为输入字段创建一个可重用的组件，我可以在一个带有道具的组件标签中更轻松地定义它们。但是，我想让它变得通用，以便能够将其用作文本、日期、密码、数字等。通过条件道具。但我无法让那个道具绑定

这是我的输入字段组件

<template>
<div class="uk-margin">
    <label class="uk-form-label" for="trackid">{{label}}</label>
    <div class="uk-form-controls">
      <input v-if="number" class="uk-input" type="number" v-model="defaultvalue" />
      <input v-else-if="date" class="uk-input" type="date" v-model="defaultvalue" />
      <input v-else-if="email" class="uk-input" type="email" v-model="defaultvalue" />
      <input v-else-if="password" class="uk-input" type="password" v-model="defaultvalue" />
      <input v-else class="uk-input" type="text" v-model="defaultvalue" />
    </div>
</div>
</template>

<script>
export default {
  name: "input-text-field",
  props: {
    label: {
      type: String
    },
    defaultvalue: {
      type: String
    },
    type: {
      type: String
    },
    number: {
      type: Number
    },
    date: {
      type: Object
    },
    email: {
      type: String
    },
    password: {
      type: String
    }
  },
  data() {
    return {
      value: ""
    };
  }
};

</script>

我像这样打电话或想像这样使用它们

<InputField label="User Name" :defaultvalue="myName" />
<InputField label="User Email" email :defaultvalue="myEmail" />
<InputField label="User Password" password :defaultvalue="myPass" />
<InputField label="Tracking #" number :defaultvalue="trackingNumber" />

根据我的理解，如果我调用密码，它应该混淆值，因为它会在给定条件语句的情况下呈现 type="password"。不？我究竟做错了什么

*PS 默认值将被存储并用作状态。那部分有效。现在，我没有收到控制台错误，但无论如何组件都会呈现为文本。

标签： vue.jsvuejs2vue-component

解决方案

v-else-if="password"测试password道具的价值。它相当于：

if (vm.password)

然而，

<InputField label="User Password" password :defaultvalue="myPass" />

提供password道具，但没有与 . 相同的值:password="true"。但是，密码属性需要一个字符串，而不是布尔值。在这种情况下，Vue 显然将空字符串分配给评估为false. 你所有的其他例子都是一样的，这就是为什么else总是选择子句的原因。

顺便说一句，您应该在控制台中有关于此的警告。你不应该忽视这些。

这应该有效：

<InputField label="User Password" password="true" :defaultvalue="myPass" />

但是，我建议您返工您的组件。与其定义这么多的 props，不如调用一个inputType并将所需的输入类型作为字符串传递。然后你会有：

<InputField label="User Email" inputType="email" :defaultvalue="myEmail" />
<InputField label="User Password" inputType="password" :defaultvalue="myPass" />

推荐阅读