@igor_solweb

Как правильно передать props вида inputEl.value?

Здравствуйте, продолжаю осваивать vue. Решил создать отдельные базовые компоненты для input, textarea и т.д.
Но не могу понять как правильно передать их props в основной компонент?

Покажу на примере input компонента.
Сам компонент input находится в el-input.vue
<template>
  <div>
    <b-form-group :id="inputGroupId" :label="label" :label-for="inputId">

      <input type="text"
             :value="title"
             :placeholder="placeholder"
             :id="inputId"
             class="mw-100"
             @input="handleChange($event.target.value)">
    </b-form-group>
  </div>
</template>

<script>
export default {
  name: "el-input",
  props: {
    inputGroupId: String,
    inputId: String,
    label: {
      type: String,
      default: 'Label'
    },
    type: String,
    placeholder: String,
    title: ''
  },
  methods: {
    handleChange (ev) {
      this.$emit('input', ev)
    }
  }
}
</script>


он подключается в модальное окно, которое также является отдельным компонентом, покажу как подключаю:
<elInput
                    :input-group-id="inputEl.groupId"
                    :input-id="inputEl.id"
                    :label="inputEl.label"
                    :type="inputEl.type"
                    :placeholder="inputEl.placeholder"
                    v-model="inputEl.value"
                />

export default {
components: {
    elInput
  },
data() {
    return {
      inputEl: {
        label: "Текст",
        id: "input-element",
        groupId: "input-group-element",
        type: "text",
        placeholder: "Текст",
      },
  props: [
'inputEl.value'
  ]
}


Так вот, как правильно передать inputEl.value, чтобы в основном компоненте я мог работать с текстом в этом поле?
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы