Having trouble with sending a list of items from a VueJS form

I have a VueJS application that calls a patch method to update a user's profile. For example, I am attempting to update the field cities.

I created a serializer and views.py using Postman during development. I used Postman to call the patch method for updating the user profile, as shown in the command below. Patch always worked when called from the Postman API.

"cities": [
        "SANTA CLARA",
        "MILPITAS"
    ]

After completing development, I tried to integrate with my VueJS app. I am passing cities from a text box, as shown in the following code:

<div class="form-group col-md-12">
                          <label for="">Prefered Cities to work</label>
                          <input
                            type="text"
                            class="form-control"
                            ref="cities_input"
                            id="cities"
                             v-model="userDetails.cities"
                          />

In the form save action, the code uses the following function:

 formData.set("cities", this.$refs.cities_input.value);

If only one city is provided in the text box, the values are updated in the database successfully. However, if more than one city is provided in the text box (e.g., "SANTA CLARA","MILPITAS"), or without quotes like SANTA CLARA,MILPITAS, the values are not updated in the database. Any help would be highly appreciated.

I also attempted hardcoding in the save action as follows, but it did not result in successful saving:

formData.set("cities", [ "SANTA CLARA","MILPITAS"]); 

Answer №1

Below is the code that has been implemented to resolve the issue:

      var cityArray =  (this.$refs.cities_input.value).split(',')
      for (var i = 0; i < cityArray.length; i++) {
            formData.append('cities', cityArray [i]);
      }

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

Is there a way to sort an elastic query using JavaScript?

I'm trying to modify my elastic query by adding and removing items from an array. In the array below, I want to remove the element that contains 'item2'. How can I achieve this by checking if the key 'item2' exists and then deletin ...

Ionic ion-view missing title issue

I'm having trouble getting the Ionic title to display on my page: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101 While my code isn't an exact match with the Ionic example, I don't want to complicate things by adding multiple layers of st ...

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

There is no result being returned by Model.findOne()

Why does Model.findOne() return null even when a valid collection is present in the respective Model? app.post("/fleetManagement", (req, res) => { const requestedDriverID = req.body.driverId; console.log(requestedDriver ...

Using .attr() to change the 'id' in jQuery will not be effective

Initially, the code has been streamlined to include only the necessary components. Here is the HTML file (single_lesson.html) in question: <tr class="my_lessons"> <td> <select name="my_von" id="my_von"></select> &l ...

Obtain a string value from a JavaScript object

My dilemma involves a specific Javascript object. { A: 1, B: 2, C: 2, D: 1, E: 1, F: 4, G: 6, H: 2 }, The goal is to extract a four-letter string based on the key with the highest value, but there are limitations. The stri ...

Retrieve vue environment variables within a template

I am trying to figure out how to access my environment variables directly from the template of Vue single file components. When attempting to do so like this: <img :src="`${process.env.VUE_APP_API_BASE_URL}/image/${image.filename}`" alt=" ...

The challenge of rendering in Three.js

After configuring my code to render a geometry, I discovered that the geometry only appears on the screen when I include the following lines of code related to control: controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventList ...

Error in Typescript: 'SyncClient' not found in Twilio

While working on my Ionic app, I encountered an issue every time I attempted to use the twilio-chat library in my project through npm install. The error consistently appeared in the .d.ts files. Here is how I imported it in my provider : import { Client ...

Creating a visual representation from an array of strings to produce a

My goal is to organize a list of server names into a map using a specific logic. For instance, with names like: "temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2" They would be mapped as: { a: [ "temp-a-name1", "temp-a-name2" ] ...

Steps for assigning distinct identifiers to information entered through an input form

I have a question that I just can't seem to figure out: So, I have this input form: <form @submit.prevent="customSubmit"> <label>Name</label> <input type="text" v-model="newUser.name" id=&quo ...

The URL for this page is not within the app's designated domains and will not open Facebook Dialogs (FB UI)

I am currently working on integrating Facebook UI Dialogs into my website. My goal is to add custom actions when users share a post from my site. I have created my app, added the app URL and domain (which is the same as the URL), and included all necessa ...

Top method for organizing and filtering tables in Laravel on the client side?

In my Laravel web application, I have multiple tables with MySQL data stored. I want to provide users with the ability to sort and filter data on any column header dynamically, all processed on the client side. Although Laravel does not come with this feat ...

What is the most effective method for retrieving a key and value from an Axios response object?

I currently have a Mongoose schema set up to store key:value pairs in a mixed type array, represented like this: Mongoose const budgetSchema = new Schema({ earnings: Number, expenses: [mongoose.Schema.Types.Mixed] }); budget:{ earning:1000, exp ...

Ensure that adjacent elements operate independently from one another

The code snippet provided above showcases four components: StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable. The FilterStatusCode component enables users to input search data using TagInput. If the user inputs numerous tags, this component expands ...

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

How can I convert an Array into a Dictionary using JavaScript?

Is there a clever method (perhaps using a map function) to restructure my data object from this: [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2 ...

Implementing fullCalendar's addEventSource function with the color customization feature

One feature of my application involves dynamically adding events to the calendar. function AddEventSourceDetailed(act_id) { $('#calendar').fullCalendar('addEventSource', function (start, end, callback) { var startTime = Mat ...

Error encountered when utilizing a specialized jQuery extension: "not a function"

Every time I attempt to execute this function (function($) { $.fn.generateURLHash = function() { return document.URL.substr(document.URL.indexOf('#')+1); }; })(jQuery); when I call $.generateURLHash(), an error pops up in th ...