Javascript 在VueJS中动态生成按钮和页面

我有一个JSON文件，它将数据从后端馈送到一个表中（内置引导Vue）。在该表中，我希望VueJS创建一个按钮，该按钮将在特定条件下生成，如果单击该按钮，将生成一个包含其他详细信息的新页面

以下是JSON输出的示例：

{"driver_id":2,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"58","driver_trailer":"37","driver_status":"sleeping","has_violations":true},

因此，如果“has_违规”为真，那么将生成一个按钮，onclick将通过JSON从后端请求额外的数据，然后基于该数据生成一个新页面

所以有点类似于

event.target.closest（'tr'）.dataset.userId

但在VueJS中如何实现这一点

在表格代码中编辑（每个请求）：

<template>
  <b-container fluid>

    <!--Search Controls-->
    <b-row>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Filter" class="mb-0">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Type to Search" />
            <b-input-group-append>
              <b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortBy" :options="sortOptions">
              <option slot="first" :value="null">-- none --</option>
            </b-form-select>
            <b-form-select :disabled="!sortBy" v-model="sortDesc" slot="append">
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort direction" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortDirection" slot="append">
              <option value="asc">Asc</option>
              <option value="desc">Desc</option>
              <option value="last">Last</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Per page" class="mb-0">
          <b-form-select :options="pageOptions" v-model="perPage" />
        </b-form-group>
      </b-col>
    </b-row>
    <!--Search Controls-->

    <!-- Main table element -->
    <b-table show-empty
             stacked="md"
             :items="items"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             :filter="filter"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             :sort-direction="sortDirection"
             @filtered="onFiltered"
    >
      <template slot="driverName" slot-scope="row">{{row.value.driver_first_name}} {{row.value.driver_last_name}}</template>
      <template slot="truckNumber" slot-scope="row">{{row.value.driver_truck}}</template>
      <template slot="truckNumber" slot-scope="row">{{row.value.driver_trailer}}</template>
      <template slot="status" slot-scope="row">{{row.value.driver_status}}</template>
      <template slot="violations" slot-scope="row">{{row.value?'Yes':'No'}}</template>
      <template slot="actions" slot-scope="row">
        <router-link :to="{name: 'driver_violations_list'}">
          <b-button id="driverLogs">View Driver Logs</b-button>
        </router-link>
      </template>

    </b-table>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>

  </b-container>
</template>

<script>

export default {
  data () {
    return {
      items: items,
      fields: [
        { key: 'driver_name', label: 'Driver Name', sortable: true, sortDirection: 'desc' },
        { key: 'truck_number', label: 'Truck Number', sortable: true, 'class': 'text-center' },
        { key: 'trailer_number', label: 'Trailer Number', sortable: true, 'class': 'text-center' },
        { key: 'has_violations', label: 'Violations' },
        { key: 'driver_status', label: 'Status' },
        { key: 'actions', label: 'Actions' }
      ],
      currentPage: 1,
      perPage: 5,
      totalRows: items.length,
      pageOptions: [ 5, 10, 15 ],
      sortBy: null,
      sortDesc: false,
      sortDirection: 'asc',
      filter: null,
    }
  },
  computed: {
    sortOptions () {
      return this.fields
        .filter(f => f.sortable)
        .map(f => { return { text: f.label, value: f.key } })
    }
  },
  methods: {
    onFiltered (filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length
      this.currentPage = 1
    }
    //Get JSON
    getDriverStatus: function () {
      const url = 'driver_status_data.json'
        axios.get(url, {
          dataType: 'json',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          mode: 'no-cors',
          credentials: 'include'
        })
        .then(function (response) {
          console.log(JSON.stringify(response.data))
          this.courses = JSON.stringify(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }
  }
}
</script>

清楚的
--没有--
Asc
描述
Asc
描述
最后
{{row.value.driver_first_name}{{row.value.driver_last_name}
{{row.value.driver_truck}}
{{row.value.driver}
{{row.value.driver_status}}
{{row.value？'Yes'：'No'}
查看驱动程序日志
导出默认值{
数据（）{
返回{
项目:项目,，
字段：[
{key:'driver_name'，label:'driver name'，sortable:true，sortDirection:'desc'}，
{key:'truck_number'，label:'truck number'，sortable:true，'class'：'text center'}，
{key:'trailer_number'，label:'trailer number'，sortable:true，'class'：'text center'}，
{key:'has_违规'，标签：'违规'}，
{键：'driver_status'，标签：'status'}，
{键：'actions'，标签：'actions'}
],
当前页面：1，
每页：5，
totalRows:items.length，
页面选项：[5,10,15]，
sortBy:null，
sortDesc:错误，
sortDirection:'asc'，
筛选器：null，
}
},
计算：{
分类（）{
返回此字段
.filter（f=>f.sortable）
.map（f=>{return{text:f.label，value:f.key}}）
}
},
方法：{
onfilted（filteredItems）{
//触发分页以更新由于筛选而产生的按钮/页面数
this.totalRows=filteredItems.length
this.currentPage=1
}
//获取JSON
getDriverStatus:函数（）{
constURL='driver\u status\u data.json'
获取（url{
数据类型：“json”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
模式：“无cors”，
凭据：“包括”
})
.然后（功能（响应）{
log（JSON.stringify（response.data））
this.courses=JSON.stringify（response.data）
})
.catch（函数（错误）{
console.log（错误）
})
}
}
}

使用文档中的表格插槽有条件地呈现按钮

下面是一个例子：

newvue({
el:“#应用程序”，
计算：{
driverName（）{
返回this.driver？“${this.driver.driver\u name.driver\u first\u name}${this.driver.driver\u name.driver\u last\u name}”：“不适用”
}
},
方法：{
显示违规（驾驶员）{
this.driver=driver
这是真的
//使用setInterval和setTimeout模拟异步api调用
let interval=setInterval（（）=>{
这是进度+=10
}, 250)
设置超时（（）=>{
此参数为0。加载=错误
此值为0.progress=0
清除间隔（间隔）
}, 2500)
}
},
数据（）{
返回{
进展：0，
驱动程序：空，
加载：false，
违规行为：[
“违反1”，
“违反2”，
“违反3”
],
字段：{
司机身份证：{
标签：“ID”，
可排序：正确
},
姓名：{
键：“驾驶员姓名。驾驶员姓名”，
标签：“名字”，
可排序：正确
},
姓氏：{
键：“驾驶员姓名。驾驶员姓氏”，
标签：“姓氏”，
可排序：正确
},
卡车司机：{
标签：“卡车”，
可排序：正确
},
拖车司机：{
标签：'拖车'，
可排序：正确
},
驱动程序状态：{
标签：“状态”，
可排序：正确
},
有以下违反行为：{
标签：“违规行为”，
可排序：正确
}
},
项目：[
{
司机编号：2，
司机姓名：{
司机的名字：“鲍勃”，
司机姓：“多尔”
},
卡车司机：58，
拖车司机：37，
驾驶员_状态：“正在睡觉”，
有没有违反：真的
},
{
司机编号：3，
司机姓名：{
司机的名字：“约翰”，
司机姓：“列侬”
},
卡车司机：69，
拖车司机：34，
驾驶员状态：“深度睡眠”，
是否有违反：错误
}
]
}
}
})

见违规行为
{{违规}

您能提供该表的代码吗？@BoussadjraBrahim我在中编辑了该部分。但是页面创建是如何处理的？它是一个单独的功能还是一个新页面的链接？这完全取决于你和网站的构建方式。使用

o的直接链接