Datatable v-for для создания флажка или ввода на основе данных

Question

Хотите знать, как я могу получить свои данные для построения столбца, который производит либо флажок, либо ввод на основе значения из данных. Это то, что у меня есть, но у меня хорошее предчувствие, что есть способ лучше сделать это.

<div v-for=”shirt in shirts”>
   <div v-if=”stock.shirts < 2”>
       <td><input type="checkbox"></td>
    </div>
  <div v-else>
       <td><input type="text"> of {{ props.item.shirts }}</td>
    </div>
</div>

Любая помощь будет принята с благодарностью

Answer 1

уменьшите ваше условие if

<td v-for=”shirt in shirts”><input type="checkbox"></td>
<td v-else><input type="text"> of {{ props.item.shirts }}</td>

vue docs - условный рендеринг

или вы можете использовать динамические компоненты, например:

<template>
   <td>
      <component :is="component" :data="passthroughdata" />
   </td>
</template>

//...

props: ["value", "passthroughdata"],
data() {

  return {

    component: {}
  },
},
watch: {
 value:{
   handler: async function(){
      try{
        await import(`./components/${valueBasedComponent}/index.vue`)
        this.component = () => import(`./${valueBasedComponent}/index.vue`)
      } catch() {

        this.component = () => import(`./${someDefaultComponent}/index.vue`)
      }
   },
   // immediate: true
 }
}

vue docs - Динамические и асинхронные компоненты