vue.js - Datatable v-for 根据数据生成复选框或输入

Question

想知道如何让我的数据表构建一个基于数据值生成复选框或输入的列。这就是我所拥有的，但我有一种很好的感觉，有一种更好的方法可以做到这一点。

<div v-for=”shirt in shirts”&gt;
   <div v-if=”stock.shirts < 2”&gt;
       <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”&gt;<input type="checkbox"></td>
<td v-else><input type="text"> of {{ props.item.shirts }}</td>

vue 文档 - 条件渲染

或者您可以使用动态组件，如下所示：

<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 文档 - 动态和异步组件