Vue.js передает логическое значение атрибуту компонента

Я хочу создать простой компонент ввода в Vue,
который, если условие IsPassword было истинным, установите его type = "password", а если нет, установите для него type = "text".
Я, вероятно, делаю ошибку где-то в синтаксисе, потому что я получаю parsing javascript error

это упрощенная версия моего кода
App.vue

import InputText from "@/components/InputText.vue";

<template>
Username : <InputText/>
Password : <InputText :isPassword = "true">
</template>

InputText.vue

<template>
<input :type = "{IsPassword ? 'password':'text'}" value = "Im getting error here"> 
</template>
<script>
export default {
    props: {
        IsPassword: Boolean
    }
}
</script>

javascript vue.js components parameter-passing

24.11.2022 21:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

236

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Во-первых, вы должны указать условие в фигурных скобках.

Во-вторых, синтаксис тернарного оператора должен выглядеть как condition ? if condition true : if condition false

Итак, это должно выглядеть так

<input :type = "IsPassword ? 'password' : 'text'" value = "Im getting error here">

24.11.2022 21:27

Вероятно, вам потребуется поддерживать типы функций для входного текста.

Мое предложение состоит в том, чтобы сохранить логику вне шаблонов:

import InputText from "@/components/InputText.vue";

<template>
Username : <InputText/>
Password : <InputText is-password>
</template>

<template>
   <input :type = "inputType" > 
</template>

<script>
import {computed} from 'vue';

export default {
    props: {
        IsPassword: Boolean
    },
    setup(props){
       const inputType = computed(() => props.IsPassword ? 'password' : 'text')

      return{
         inputType
      }
    }

}
</script>

24.11.2022 22:47

Другие вопросы по теме

JEST — желтые строки в отчете о покрытии для асинхронных методов

Скрыть ошибку 503 в приложении Vue 2.0 с помощью HTTP-запросов Axios

Как создать фильтр, который будет возвращать нужную карту из массива JSONArray?

Как проверить, отображается ли v-меню или нет

Цвет текста для всплывающей подсказки

Взаимоисключающие реквизиты Vue3

Как передать событие от дочернего компонента к родительскому?

Поддержание работы Vue Router с помощью ссылок маршрутизатора Vue в Vue3

Как я могу переопределить стили в табуляторе?

Как перенаправить на страницу с ошибкой, если путь имеет .(точку) в Nuxt 2?

Vue.js передает логическое значение атрибуту компонента

Ответы 2

Другие вопросы по теме

Похожие вопросы