Блог

Главная - Вопросы по программированию - список vue2 возвращает смешанную строку или компонент

список vue2 возвращает смешанную строку или компонент

#vue.js #vue-component

#vue.js #vue-компонент

Вопрос:

В подобном цикле я в основном просто перебираю значения элементов в виде строк, но иногда мне нужно вернуть визуализированный компонент, например элемент ссылки сборки или выпадающее меню, для этой ячейки таблицы — нужно найти способ вернуть другой вывод компонента вместо необработанной строки html

   <tr class="listing-item listing-item-category">
    <td v-for="td in headeritems">{{val(td.k)}}</td>
  </tr>

Это вообще возможно? Я не нашел упоминания об этом, как должен идти код метода для возврата вывода другого компонента? Я знаю, что мне пришлось бы использовать v-html, но как его получить?

Комментарии:

1. существует ли какое-либо значение для поиска компонента или строки в «headeritems»? Если это так, используйте этот тег <компонент v-bind:is=»Имя компонента» ></component> для отображения компонента

Ответ №1:

Предположим, у нас есть такой список:

 headerItems: [
  {
    type: 'text',
    value: 'Some text'
  },
  {
    type: 'img',
    props: {
      src: 'http://some-where....'
    }
  },
  {
    type: 'my-component',
    value: 'v-model value',
    props: {
      prop1: 10,
      prop2: 'Blah bla',
    },
    events: {
      myEvt: () => console.log('myEvt has fired')
    }
  },
],

Итак, мы можем отобразить его:

 <tr>
  <td
      v-for="(item, i) in headerItems" :key="i"
  >
    <div v-if="item.type === 'text'"> {{ item.value }}</div>
    <component
        v-else
        :is="item.type"
        v-model="item.value"
        v-bind="item.props"
        v-on="item.events"
    />
  </td>
</tr>