Using Vuetify Select with Vuex getters

I am having an issue with my Vuex implementation. I have a getter that retrieves an array which I use in a Vuetify drop down select component. My goal is to insert an additional property at the beginning of the array, but when I try to do so, only a number is returned from my computed property.

Below is the relevant code:

Vuetify Select Component:

<v-select
 v-on:change="setGame"
 v-model="gameid"
 :items="games"
 item-text="gametitle"
 item-value="gid"
 label="Select Game"
 ></v-select>

Computed Property for 'games':

games(){
    return this.$store.getters.games.unshift({ 'gametitle': 'All Games', gid: null });
}

The original working return statement:

return this.$store.getters.games

Error Message:

[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Number with value 3.

found in

---> <VSelect>
       <VToolbar>
         <Navbar> at src/components/layout/Navbar.vue
           <VApp>
             <App> at src/App.vue
               <Root>

Answer №1

Eureka! I have finally solved the problem by using the concat method instead of push. Behold, here is my ultimate code snippet:

fetchGames(){
    var allGames = [
        {'title': 'All Games', id: null}
    ]
    return allGames.concat(this.$store.getters.games);
}

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

Exploring Search Functionality with Vue.js 2 and Axios: Implementing API Filtering

I am currently trying to sort through a list of films that I have retrieved using axios. The purpose is to compare them to a search string for a search feature. Everything seems to be working fine, except when I use the computed property, it gives me an er ...

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

I'm curious about how to utilize module.exports in this particular manner

I'm currently trying to wrap my head around how module.exports works with a variable in the context of a model view controller project. The explanation in the book doesn't quite click for me when it comes to this particular usage. var express = ...

Using Mootools to call a class function from a bound CSS class may lead to an error stating that it is not a function

Utilizing Mootools 1.3.2 Here is the code snippet: var DNReportAbuse = new Class({ Extends: DNUserDialog, comment_id: null, container: null, initialize: function(classname) { var bindclass = $(document.body).getElements(classname); bindclass. ...

What is the process of sending a post request using axios to insert data into a database in React

I am currently working on a login system using mysql, axios, express, and react. The database connections are functioning properly, but I am encountering errors specifically with these two posts, displaying messages like "ERR_CONNECTION_REFUSED" and UNCAUG ...

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

Working with time durations in Moment.js to manipulate datetime

How can I properly combine the variable secondsToMinutes with the startdate? The value of secondsToMinutes is "3:20" and the startDate is "2:00 PM". The desired endDate should be "2:03:20 PM". Despite my efforts, I keep encountering errors every time I at ...

Access the element generated by Bootstrap using JavaScript

When working with JS, I'm attempting to select an element created by Bootstrap, however, it consistently returns an undefined response. The element looks like this: <input class="form-control form-control-sm search-input" type="searc ...

How come the link function of my directive isn't being triggered?

I'm encountering a strange issue with this directive: hpDsat.directive('ngElementReady', [function() { return { restrict: "A", link: function($scope, $element, $attributes) { // put watche ...

Learn how to incorporate latitude and longitude coding into PHP to display a map icon that correctly redirects to the desired URL when clicked

I am in need of a table that includes buttons for adding, editing, deleting, and mapping. Everything works fine so far, but when I click on the map button, it should take me to Google Maps with coordinates linked from a MySQL database containing latitude ...

The VLC WebPlugin puts a halt on websocket activity during playback

I currently have a basic HTML/JS application that includes an embedded VLC WebPlugin and several methods for play/pause functionality. This application is being managed by another JavaScript file through a straightforward server/websocket C# setup. The con ...

Guide on confirming the presence of an element on a webpage utilizing Node.js, Mocha, and Selenium

Is there a way to confirm the presence of an element on a webpage now that selenium v3 has removed the "isElementPresent" functionality? Can you provide an example of how to accomplish this without using driver.isElementPresent? For instance, if I need to ...

Using ngTable within an AngularJS application

While working on my angularjs application, I encountered an issue with ngtable during the grunt build process. It seems that the references are missing, resulting in the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module pa ...

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

Is there a way to get rid of the tiny black line beside the Instagram icon?

Here is the display on my website This is the code that was used I am struggling to identify the source of the small black "-" line next to the Instagram icon logo. ...

Maintain constant positioning of the gltf model slightly ahead of the player as they move in the A-frame

Is there a way to make a gltf model in A-frame () follow the player slightly in front and at eye level to the camera? I want the model to always be in front of the player and at their eye level, so it moves along with the player's movements. How can t ...

Using Node.js to implement GET, POST, and DELETE functionalities

I have embarked on the journey of learning Node.js and I find myself in a state of confusion. Could you please guide me on how to construct effective HTTP requests for the following scenarios: 1) Retrieve all galleries from the gallerySchema using a GET ...

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

The div functions seem to stop working properly after they have been multiplied

Initially, I use JavaScript to multiply the div but then encounter issues with the function not working properly. function setDoorCount(count) { $('.doors').html(''); for (var i = 0; i < count; i++) { var content = " ...

Arrays of characters in Fortran

I am seeking a method to handle a set of character data using two simultaneous arrays within the same program unit. For instance, I envision CHARACTER(1) Array1(40960) and CHARACTER(4096) Array2(10) both referencing the same data. It's worth not ...