V-для с шаблоном

Question

Я использую vue-bootstrap. Я пытаюсь создать динамический компонент сетки, который получает заголовки и данные. Поскольку мы не будем знать, сколько столбцов передано компоненту, мы должны проверять каждый переданный элемент.

<template>
    <b-table striped hover :items="items"></b-table>
        <div v-for="title in items">
          <template slot="title.key" slot-scope="data">
            <input v-if="title.isActive" type="text" v-model="data.value">
            <textarea v-else type="text" v-model="data.value"></textarea>
          </template>
        </div>
   </b-table>
</template>

<script>
const items =[
      {'label': 'Description', 'key': 'description'},
      {'label': 'Name',  'key': 'name', 'isActive': true},
    ]

Таким образом, если isActive имеет значение true, тогда этот шаблон должен быть textarea (столбец должен быть изменен с textarea вместо ввода). Однако он не работает, и ни один столбец не изменился, ни inputbox, ни textarea, и оставался шаблоном по умолчанию.

Не могли бы вы помочь по этому вопросу.

Спасибо

Answer 1

Я думаю, что вы должны отделить title в переменной v-for и slot-scope, чтобы избежать путаницы:

<template v-for="title in items" :key="title.key">
  <template :slot="title.key" slot-scope="item">
    <input v-if="item.isActive" type="text" v-model="item.value">
    <textarea v-else type="text" v-model="item.value"></textarea>
  </template>
</template>

Answer 2

Благодаря ответу ittus, после незначительной модификации работает следующий путь.

<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>

Спасибо вам всем.

Answer 3

Так как, isActive свойство присутствует внутри объекта в items массив, вам нужно получить к нему доступ как свойство итерируемого.

Таким образом, код становится:

<div v-for="title in items">
  <template slot="{{title.key}}" slot-scope="{title}">
    <input v-if="title.isActive" type="text" v-model="title.value">
    <textarea v-else type="text" v-model="title.value"></textarea>

  </template>
</div>

Answer 4

Вы можете проверить этот пример для динамических столбцов.

new Vue({
  el: "#app",
  data: {
    fields: [{
      key: "id",
      label: "Id",
      colType: "span"
    }, {
      key: "name",
      label: "Name",
      colType: "button"
    }, {
      key: "uhh",
      label: "uhh..",
      colType: "idk"
    }],
    items: [{
      id: 0,
      name: "Test 0"
    }, {
      id: 1,
      name: "Test 1"
    }, {
      id: 2,
      name: "Test 2"
    }]
  }
});

<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
      <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
      </div>
      <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
      </div>
      <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
      </div>
    </template>
  </b-table>
</div>

Answer 5

Я не получил эти ответы на работу. Что на самом деле помогло мне, было это:

https://forum.vuejs.org/t/how-to-pass-cell-templates-to-a-component-with-b-table/106283

и эта скрипка: https://jsfiddle.net/skirtle/6of9dnpz/

        toCellName (slot) {
      return `cell(${slot})`
    }

Суть в том, что toCellName возвращает правильное имя слота.

Answer 6

Вы должны использовать ниже фрагмент.

<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>