I'm encountering an issue when trying to export the data received from the API in my JavaScript file and display it in my Vue file.
Currently, I am sending a security JSON to the server using the POST method. Although I am able to retrieve the output with console log, my goal is to showcase this data in my Vue file rather than just logging it.
In attempting to achieve this, here is what I've tried:
dataAdvancedTable.js
import axios from "axios";
const data = JSON.stringify({
"guvenlik_bir": 111,
"guvenlik_iki": 111111
});
const config = {
method: 'post',
url: 'https://altayapi.altaydigital.com/api/blog/list',
headers: {
'Content-Type': 'application/json'
},
data : data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
export default data;
list.vue
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import appConfig from "@/app.config";
import data from "./dataAdvancedtable";
/**
* All Posts component
*/
export default {
page: {
title: "All Posts",
meta: [{ name: "description", content: appConfig.description }]
},
components: { Layout, PageHeader },
data() {
return {
data: data,
title: "All Posts",
items: [
{
text: "Blog",
href: "/"
},
{
text: "All Posts",
active: true
}
],
totalRows: 1,
currentPage: 1,
perPage: 10,
pageOptions: [10, 25, 50, 100],
filter: null,
filterOn: [],
sortDesc: false,
fields: [
{ key: "selected" },
{ key: "title", sortable: true },
{ key: "body", sortable: true },
{ key: "category", sortable: true },
{ key: "date", sortable: true },
{ key: "actions", label: "Actions" }
],
selectMode: 'multi',
selected: []
};
},
computed: {
/**
* Total no. of records
*/
rows() {
return this.data; // this.data.length;
}
},
mounted() {
// Set the initial number of items
this.totalRows = this.items.length;
},
methods: {
/**
* Search the table data with search input
*/
onFiltered(filteredItems) {
// Trigger pagination to update the number of buttons/pages due to filtering
this.totalRows = filteredItems.length;
this.currentPage = 1;
},
onRowSelected(items) {
this.selected = items
},
selectAllRows() {
this.$refs.selectableTable.selectAllRows()
},
clearSelected() {
this.$refs.selectableTable.clearSelected()
},
selectThirdRow() {
// Rows are indexed from 0, so the third row is index 2
this.$refs.selectableTable.selectRow(2)
},
unselectThirdRow() {
// Rows are indexed from 0, so the third row is index 2
this.$refs.selectableTable.unselectRow(2)
}
}
};
</script>
console output:
{"blogs":[{"id":1,"title":"title","slug":"slug","description":"description","text":"text","image":null,"categori":1,"read":2,"created_at":"2022-10-27T08:28:22.000000Z","updated_at":"2022-10-27T08:51:46.000000Z","deleted_at":null,"find_categori":null}]}