A step-by-step guide on how to fill a Vuetify select box with data retrieved from

I'm currently working on populating a select box in Vuetify by retrieving data through an ajax call. I'm struggling to figure out how to populate the select box with this data. The ajax call is successful and I receive an array of objects which I assign to the 'items' variable. Here is my attempted code:

v-select

<v-select
  :items="items"
  item-text="test"
  v-model="client"
  label="Choose a Client"
  class="input-group--focused"
  item-value="text"
></v-select>

Get Client Function

getClient: function (items) {
  axios.get('http://127.0.0.1:8000/client/')
    .then(function (response, items) {
      console.log(response.data);
      items = response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
}

Call Function

created() {
  this.getClient(this.items);
}

Answer №1

When working with the getClient function, be mindful that the arguments are passed by reference. This means that assigning items inside getClient does not directly affect this.items.

To solve this, access this.items directly:

created() {
    this.getClient();                                   // removed this.items
},
methods: {
    getClient: function () {                            // replaced `function (items) {` with `function () {`
            axios.get('http://127.0.0.1:8000/client/')
            .then((response) => {                       // replaced `function (response, items) {` with `(response) => {`
                console.log(response.data);
                this.items  = response.data;            // used `this.items = ` instead of `items = `
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }

Notice the important change here:

.then(function (response, items) {
    console.log(response.data);
    this.items = response.data;
})

Now, with:

.then((response) => {                // using arrow function now
    console.log(response.data);
    this.items = response.data;
})

It's crucial to use the arrow function to ensure that this points to the Vue instance when assigning this.items = response.data;. With a regular function () {}, the context of this may vary, potentially causing issues.

For more insights, refer to MDN - Arrow Functions.

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

Mandate that users select from the available place autocomplete suggestions exclusively

I have integrated the "Places" Google API to enable address autocomplete in an input field on my website. However, since the service is limited to a specific area, I have implemented an autocomplete filter. The issue I'm facing is that users are stil ...

Best practice for detecting external modifications to an ngModel within a directive

I've been working on creating a directive that can take input from two sources and merge them into one. To achieve this, I'm monitoring changes in both inputs and updating the combined value in the ngModel of my directive. However, there's ...

Vue.js and TypeScript combination may result in a 'null' value when using file input

I am attempting to detect an event once a file has been uploaded using a file input. Here is the JavaScript code: fileSelected(e: Event) { if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) { ...

Issue in Vuetify: The value of the first keypress event is consistently an empty string

I need to restrict the user from entering numbers greater than 100. The code snippet below represents a simplified version of my production code. However, I am facing an issue where the first keypress always shows an empty string result. For example, if ...

Is it possible to create a transparent colored foreground in HTML?

Looking to create a translucent foreground color on a webpage? I'm aiming to give a hint of red to the overall look of the website. Edit: Just to clarify, I am not referring to changing font colors. I want a color that can overlay the entire page wit ...

Exploring Javascript through Python using Selenium WebDriver

I am currently attempting to extract the advertisements from Ask.com, which are displayed within an iframe generated by a JavaScript script hosted by Google. Upon manually navigating and inspecting the source code, I can identify the specific element I&ap ...

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> https://i.sstatic.net/R3Yps.png located at the top center of the webpage, with ...

Adding Labels to Doughnut Charts in React using Chart.js 2.0

Currently, I'm exploring the world of data visualizations using react, react-chartjs-2, and chart.js version 2.2.1. While searching for a solution to my inquiry, I came across a potentially relevant answer on this link (specifically check out the upda ...

ReactJS: Want to update card design by utilizing the onClick event handler

Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create car ...

Tips for implementing fetch in a GET request and displaying the outcomes on the screen

Currently, I am utilizing express router in Node for an endeavor to display a page with data retrieved from an API. Unfortunately, no results are returned, and I can confirm that the issue does not lie with the API itself. Upon manual inspection in the con ...

Using React: Passing the state value of Child1 to the Parent component, then passing it back down to Child2 from

Within my application, I've implemented two child components: 'FoodScreen' and 'OperationScreen', along with a parent component called 'Desk'. I am passing a JSON array variable to the FoodScreen component in order to sel ...

Ensuring Vue.js correctly re-renders an array item

In my vue.js 2 project, I am working with an array that has the following structure: data() { return { ports: [ { id: 1, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}, { id: 2, ...

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

What is the process for incorporating a custom attribute into an element with Vue directives?

One of the challenges I'm facing is dealing with a custom attribute called my-custom-attribute. This attribute contains the ID for the element that needs to have the attribute added or removed based on a boolean value. Although I've implemented ...

Can PHP's CURL handle cookies?

Recently, I set up a poll using PHP that allows voting without the need for an account. However, I became concerned about the possibility of the poll being vulnerable to hacking and spam votes. I discovered that I could potentially vote multiple times by ...

The CSS class names for Next.js have not been defined yet

Just getting started with next js and trying to use css modules for styling my nav component. However, I noticed that the classname I setup for the nav element is not showing up in the rendered DOM. Even though I can see the generated styles by webpack in ...

++first it must decrease before it increases

I'm attempting to create a basic counter feature, where clicking on a button labelled "+" should increase a variable named Score by 1, and the "-" button should decrease it by 1. However, I've encountered an issue where pressing the "+" button fo ...

Expanding and collapsing multiple tables in Material-UI

I'm currently working on creating a collapsible table using MaterialUI. At the moment, all my slides have collapses but they are connected to one state for "open", so when I open one slide, all the other slides also open. Here is an example sandbox t ...

What sets v-html apart from v-text?

I recently encountered this issue with the v-text directive: <h1 v-text="content.title"></h1> Result was: Brand Name is B&amp;C To resolve it, I switched to using the v-html directive in the line above: <h1 v-html="con ...

Implementing a personalized filter onto the footer of an AngularJS UI Grid

After successfully creating a custom filter for my ui-grid that limits decimal numbers to two places and exporting it as a pdf using ui-grid-exporter, I encountered an issue. The filter works fine when exporting the main ui-grid but fails to apply within t ...