Как выводить значение input по клику на enter?

Question

[Alex]

подскажите пожалуйста как выводить значение по клику на enter input text ? Компонент Input.vue

<template>
  <input 
  type="text" 
  class="text-gray-100 text-xs font-bold px-5 bg-transparent border border-gray-900 border-solid rounded-xs min-h-11.5 w-full mt-5 hover:bg-black-700 hover:border-black-700 cursor-pointer transition-all focus:border-purple caret-purple" placeholder="Name..." 
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
  @keyup.enter="modelValue = $event.target.value"
  >
</template>

<script>
export default {
        name: 'InputFilterName',
        props: {
            modelValue: {
                type: String,
                default: '',
        required: true
            },
    },
    emits: ["update:modelValue"],
  }
</script>

Компонент где вставляется компонент input

<div class="">
      <InputFilterName
      v-model="textName"
      />
    </div>
    <div class="text-white">
      {{textName}}
    </div>

<script>
export default {
  name: 'NameDropDown',
  data(){
    return {
      textName: '',
    }
  },
}
</script>

Answer 1

[Wispik]

@input="$emit('update:modelValue', $event.target.value)"
@keyup.enter="modelValue = $event.target.value"

keyup и input это события и код в них одинаковый должен быть
Почему в одном месте emit написан, в другом нет - это конечно загадка

Comments

[Alex]

Wispik , добрый день не в этом проблема я уже убрал. И сделал во так, но не работает не могу понять почему. кидает ошибку Uncaught TypeError: fn is not a function.

<div class="">
      <InputFilterName
      v-model="textName"
      @keyup.enter="outputValue"
      />
    </div>

export default {
  name: 'NameDropDown',
  data(){
      textName: '',
      outputValue: '',
    }
  },
  methods: {
    outputValue(){
        this.outputValue = this.textName
    }
  }
}
</script>

[Wispik]

Alex, что убрал? Код в вопросе рабочий, просто надо вставить в @keyup.enter тоже, что и в @input

[Alex]

Wispik, я менял как ты написал. ничего не поменялось как выводился текст при вводе, так и выводится, а мне нужно только при клике на кнопку enter.

<input 
  type="text" 
  class="text-gray-100 text-xs font-bold px-5 bg-transparent border border-gray-900 border-solid rounded-xs min-h-11.5 w-full mt-5 hover:bg-black-700 hover:border-black-700 cursor-pointer transition-all focus:border-purple caret-purple" placeholder="Name..." 
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
  @keyup.enter="$emit('update:modelValue', $event.target.value)"
  >

[Wispik]

Alex, так если нужно только при клике, то нужно убрать событие input

[Alex]

Wispik, вот спасибо тебе большое, столько времени убил не могу понять почему не работает, а выводит все равно))))