What is the best way to import the axios post method from a JavaScript file into a Vue component

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}]}

Answer №1

It is important to verify the file names.

list.vue

retrieve information from "./dataAdvancedtable";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue webpack template disregards certain plugins

Can anyone help me troubleshoot an issue with my webpack configuration? I am trying to use the IgnorePlugin plugin to remove locales from moment when building my app, but it's not working when I run "npm run build" for the production build. Any sugges ...

Examine the state of each element within a div separately

I have a div containing elements with the class 'container'. Each of these container elements has multiple child divs with the class 'children'. I am looking to perform an action on the child divs when they become visible in the viewpor ...

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

Javascript recursive method for fetching data entries

Seeking a solution to retrieve interconnected records based on a parent column, where the relation can be one or many on both ends. After attempting a recursive function without success, I found my code became overly complex and ineffective. Is there a st ...

What steps do I need to take to ensure this function runs sequentially? Perhaps my understanding of async and await is lacking

I have a function that is responsible for adding data to my database. However, I'm encountering some inconsistency where it works sometimes and fails other times. My suspicion is that the eDataBuilder function is taking too long to iterate through the ...

Utilizing a single variable across different JavaScript scripts - where one script includes a .ready function while the other does not

I am facing a challenge with 2 javascript scripts that I have: <script type="text/javascript"> function capture(){ var canvas = document.getElementById('canvas'); var video = document.getElementById('video'); canvas.getContext ...

What are the methods to transmit various data formats in an AJAX POST request?

I am facing an issue with sending a JSON object along with two file upload objects to the controller in JavaScript. I have tried the following code snippet: data: {"jsonString":jsonString, "fd":"fd", "fd1":"fd1"}, Is there any other way to achieve this, ...

FlexSlider in WordPress is failing to display captions

Before pointing out any similar questions, please note that the answer from those sources does not apply to my specific code. I am trying to achieve this through a function as outlined here But I am struggling to figure out how to add captions only if th ...

Ember - connecting to a JSON data source

Recently, I have been following a tutorial/example from codeschool and everything is going well. However, the example code includes the line: App.ApplicationAdapter = DS.FixtureAdapter.extend(); Now, I want to maintain all the existing functionality but ...

Is there a way to verify if the JSON Object array contains a specific value or not?

Hi there! I'm new to JavaScript and I have a question. I need to determine whether the value of an Object is included in a JSON file or not. If it is, then I need to do one thing, otherwise I need to do something else. First, I am retrieving the JSON ...

Is it possible to utilize jQuery to insert a chosen form into a table?

Here is the code example I am working with: <label for="">Select Ticker: </label> <select class="form-control" style="display: inline" id='selected'> {% for p in tickers %} <option value="{{ p.tick ...

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

turn off date selection in vue date picker

I am working on disabling specific dates within a date picker. However, my current approach doesn't seem to be fully functional. <v-date-picker v-model="dates3" :max-date="today"> </v-date-picker> data( ...

Sending an object to a Vue 2 component and confirming its validity

I am working with a Vue component that has numerous props. <Field v-for="field in fields" :key="field.name" :name="field.name" :type="field.type" :label="field.label" :values="field.values" :value ...

Excel-like JSON Data Grid using jQuery

I am in need of a data grid similar to an Excel sheet. My primary focus is on filtering capabilities only (refer to the image below). Can anyone offer assistance with this? ...

To achieve the desired format, where should I press or manipulate the information?

I need help with manipulating arrays to generate a specific JSON file structure. I've made some progress but got stuck at this point: var T_nn_IN = document.getElementById('datatablenewname'); var tabledata_newname_initialname = []; ...

Issue with Build System CTA's/Callback function functionality not operational

I have encountered an issue with my build/design system. Although everything works fine during development, when I publish my package and try to use the callback function, it does not return the necessary data for me to proceed to the next screen. I tried ...

Refresh a component by utilizing Vuex getters

I have been attempting to trigger a re-render of a component, and I came across the suggestion of using key to force the re-render. I decided to go with this approach, setting my key as a value fetched from the store. However, even after committing a mutat ...

"Adding page-specific scripts with the help of nunjucks and express app: A step-by-step guide

What is the most efficient way to manage scripts that are common for all pages and scripts that are specific to certain pages using nunjucks as the template engine and express 4 as the backend framework? --- site --- public |___js |___ script.js (f ...