Vue. js. Визуализация различных видов дочерних компонентов в соответствии со списком условий - PullRequest
Новая
       36

Vue. js. Визуализация различных видов дочерних компонентов в соответствии со списком условий

1 голос
/ 16 апреля 2020

Я новичок не OOP, а VUE. JS особенно.

У меня есть список условий, в соответствии с ними я должен показать на странице несколько различных типов компонентов.

Как можно отобразить, например, 2 компонента TextInput (или 3 .. 10) динамически и читать введенный текст в родительском после нажатия кнопки?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

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

Если вы хотите отобразить несколько компонентов, просто используйте v-for и укажите условия в v-if, который определит, будет ли отображаться этот конкретный компонент: 

<input 
  v-for="input in inputs" 
  v-if="input.show"
  v-model="input.model"
  :placeholder="input.label" 
  type="text"
>

<button @click="handleButtonClick()">Button text</button>

data: () => ({
  inputs: [
    { 
      label: 'input 1', 
      model: '',
      show: true
    },
    { 
      label: 'input 2', 
      model: '',
      show: true
    }
  ]
}),
methods: {
  handleButtonClick () {
    console.log(this.inputs)
  }
}
0 голосов
/ 16 апреля 2020

Если вы не знаете тип компонента, который вам нужно отобразить, вы можете использовать dynamici c component .

В двух словах это определяет тип компонента, используемого во время выполнения, на основе значения.

Предположим, у вас есть 2 разных типа компонентов

  • TextComponent
  • ImageComponent

Вы можете иметь список элементов 

data () {
 return {
   items: [
     {
      id: 1,
      val: 'something',
      type: 'TextComponent'
     },
     {
      id: 2,
      val: 'something',
      type: 'ImageComponent'
     }
   ]
 }
}

Теперь вы можете перебирать список и отображать компонент на основе type

<component v-for="item in items" :key="item.id" :is="item.type" v-model="item.value />

Если type не является точным названием компонента, вы можете перевести его в условие :is. Примерно так. 

:is="getComponentFromTag(item.type)"

А потом напишите метод преобразования 

methods: {
 getComponentFromTag (tag) {
   switch (tag) {
     case 'text':
       return 'TextComponent'
     case 'img':
       return 'ImageComponent'
   }
 }
}

Для примера выше я предполагаю, что items выглядит так: 

items: [
     {
      id: 1,
      val: 'something',
      type: 'text'
     },
     {
      id: 2,
      val: 'something',
      type: 'img'
     }
   ]
...