J'utilise vue-bootstrap. J'essaie de créer un composant de grille dynamique qui obtient des en-têtes et des données. Puisque nous ne saurons pas combien de colonnes passées au composant, nous devons vérifier chaque élément qui est passé.

<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},
    ]

Donc, si isActive est true, alors ce modèle doit être textarea (la colonne doit être changée avec textarea au lieu de input) Cependant cela ne fonctionne pas et aucune colonne n'a changé ni inputbox ni textarea et reste le modèle par défaut

Pourriez-vous s'il vous plaît aider sur ces questions.

Je vous remercie

0
JavaChip 20 nov. 2018 à 07:57

5 réponses

Meilleure réponse

Je pense que vous devriez séparer title dans la variable v-for et slot-scope pour éviter toute confusion:

<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>
2
ittus 20 nov. 2018 à 05:11

Grâce à la réponse d'ittus, après une modification mineure, la méthode suivante est travaillée.

<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>

Merci à tous.

0
JavaChip 20 nov. 2018 à 07:07

Puisque la propriété isActive est présente à l'intérieur de l'objet dans le tableau items, vous devez y accéder en tant que propriété d'un iteratee.

Le code devient donc:

<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>
0
waleed ali 20 nov. 2018 à 05:06

Vous devez utiliser l'extrait ci-dessous.

<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
0
Paresh Gami 20 nov. 2018 à 05:05

Vous pouvez consulter cet exemple pour les colonnes dynamiques.

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>
0
nardnob 20 nov. 2018 à 16:28