Question 260281 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing input value to vue component

I’m new in vuejs and I was creating custom components for elements like buttons, links, inputs, etc.
This is my input component-

<template>
  <div class="position-relative">
    <input
      :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"
      :type="inputType"
      :id="label ? slugify(label) : null"
      v-model="inputValue"
      v-bind="$attrs"
    />
    <CustomButton
      type="button"
      transparent
      class="position-absolute end-0 top-50 translate-y--50"
      v-if="type === 'password'"
      @click="togglePasswordVisibility"
    >
      <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />
    </CustomButton>
  </div>
</template>

<script>
import RemixIcon from '../components/RemixIcon.vue';
import CustomButton from '../components/CustomButton.vue';

export default {
  components: {
    RemixIcon,
    CustomButton
  },
  props: {
    type: {
      type: String,
      default: 'text',
    },
    label: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      inputValue: '',
      showPassword: false,
    };
  },
  computed: {
    inputType() {
      return this.showPassword ? 'text' : this.type;
    },
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    slugify(str) {
      return str
        .toLowerCase()
        .trim()
        .replace(/[^ws-]/g, '')
        .replace(/[s_-]+/g, '-')
        .replace(/^-+|-+$/g, '');
    },
  },
};
</script>

<style scoped></style>

When I use v-model on it, It doesn’t work properly

<TextInput type="text" v-model="user_name" />

In this case user_name has a default value but It doesn’t appear in input.

I want to use v-model with this input and make it useable.

I tried searching online and asked from AI tools but nothing worked for me.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As @jaromanda-x mentioned, I updated my component like this -

    <template>
  <div class="position-relative">
    <input
      :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"
      :type="inputType"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <CustomButton
      type="button"
      transparent
      class="position-absolute end-0 top-50 translate-y--50"
      v-if="type === 'password'"
      @click="togglePasswordVisibility"
    >
      <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />
    </CustomButton>
  </div>
</template>

<script>
import RemixIcon from '../components/RemixIcon.vue';
import CustomButton from '../components/CustomButton.vue';

export default {
  components: {
    RemixIcon,
    CustomButton
  },
  props: {
    type: {
      type: String,
      default: 'text',
    },
    label: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      inputValue: '',
      showPassword: false,
    };
  },
  computed: {
    inputType() {
      return this.showPassword ? 'text' : this.type;
    },
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>

<style scoped></style>

    And that's it.

    It's working now


  2. 0

    you can see the docs, you must update the value in custom components

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search