muhimasri
commented
2 years ago Hi there,
You can use the mounted method to call an API and get the list. Then you can modify the required field with the options you need:
<template>
<div>
<b-editable-table
:busy="loading"
bordered
class="editable-table"
v-model="users"
:fields="fields"
>
</b-editable-table>
<pre>
{{ users }}
</pre>
</div>
</template>
<script>
import BEditableTable from "bootstrap-vue-editable-table";
import { BSpinner } from "bootstrap-vue";
export default {
components: {
BEditableTable,
BSpinner,
},
data() {
return {
fields: [
{
key: "name",
label: "Name",
type: "select",
editable: true
},
{ id: 2, key: "email", label: "Email", type: "email", editable: true },
{ id: 3, key: "phone", label: "Phone", type: "text", editable: true },
],
users: [],
loading: false,
};
},
async mounted() {
this.loading = true;
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await response.json();
this.users = users;
// Assigning options dynamically. Can be replace with an await async call to an API
const nameField = this.fields.find((item) => item.key === "name");
nameField.options = [
{ value: 1, text: "Sasha" },
{ value: 2, text: "Adam" },
{ value: 3, text: "Lora" },
{ value: 4, text: "John" },
];
this.loading = false;
},
};
</script>
aborukhov
How do I assign Options from API? I tried assigning array instead of static one and it does not work