Using Vue to input an array

I'm struggling with how to handle this issue. The task involves taking input which should be a URL, and the user should be able to enter multiple URLs.

For instance:

<input 
  type="text"  
  v-model="fields.urls" 
  class="form-control" 
  id="basic-url"
  aria-describedby="basic-addon3">

The goal is to send an array of URLs to the backend in the following format:

 ['firsturl', 'secondurl', ...]

Answer №1

One effective approach is to request a string containing multiple URLs and then transform it into an array.

By doing so, you can create an array of URLs from a string that has commas separating each URL.

// field.urls = google.com, amazon.com, stackoverflow.com
let urls = fields.urls.split(',').map(x => x.trim())

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

How to use JavaScript regular expressions to verify that an input contains more than zero characters

Can someone help me with a simple regex issue? I've tried searching online but couldn't find a suitable example. I'm struggling with regex and just need to ensure that an input contains more than 1 character (i.e. is not blank). My code uses ...

Transition from the previous image to the new one with a fading effect to enhance list item navigation

I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...

The challenge of maintaining scope in AngularJS Bootstrap Modals

In my application, I am using ngRoute to load a template that includes a bootstrap modal dialog. The purpose of this modal is to prompt the user if they are sure about losing their changes when trying to leave the row they are currently editing in a table. ...

Oops! Vue.js encountered an issue where it couldn't access the property 'version' because it was undefined

Whenever I execute npm start, I encounter the following error message: ERROR TypeError: Cannot read property 'version' of undefined TypeError: Cannot read property 'version' of undefined It occurs after I have executed: npm install ...

Looking for a rival on socket.io

Currently, I am working on a script utilizing socket.io with express in node.js to find an opponent. In this setup, only two players are allowed in a room. If no free rooms are available, a new one should be created automatically. The core logic of the c ...

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

Ways to add a string to an array as a labeled object in javascript?

Is there a way to manipulate the array in imageCollection to achieve the format of the array in carouselPhotos as shown below? export default class HomeScreen extends Component { state = { imageCollection: [ { name: "P ...

What is the method for inserting an object into a jsonArray in TypeScript?

I am trying to add an object to existing JSON data in TypeScript. I am new to TypeScript and have created an array variable called jsonArrayObject, which contains a boolean[] type. This jsonArrayObject holds a contactModel object with properties like fname ...

What steps can be taken to activate a class upon a click event?

I have successfully implemented a hover function to change the background color on my element, but now I need to add an additional functionality to make the class active on click event as well. I have been struggling to find a solution for this issue and ...

Pop-up confirmation dialog in JQuery following an AJAX request

In order to validate on the server side whether a person with a specific registration number already exists in the database, I have implemented a process. If the person is found registered, the program flow continues as usual. However, if the number is not ...

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

Get the Google review widget for your web application and easily write reviews using the Google Place API

I developed a platform where my clients can provide feedback and ratings on my services through various social media platforms. Currently, my main focus is on collecting Google reviews using a Google widget/flow. https://i.sstatic.net/RvPst.png The imag ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

Identifying and capturing changes in child scope events or properties in Angular

I am encountering an issue with my form directive where I need to intercept ng-click events nested within varying child scopes of the form element. However, I am struggling to hook into these events or child scope properties in a generic way. For demonstr ...

Update the state within a different function in Vue.js

Just starting out with Vue.js and I'm trying to figure out how to update the component's state from a function in another file. I have a basic form with only an input file element. Once the user selects a file, the onChange handler will be trigg ...

PHP code to append values to the first array based on matching IDs from the second array

I find myself in a situation where I have two distinctive arrays as shown: Array1 $array1 = Array ( 0 => Array ( 'ID' => 101, 'Code' => 1075, 'Date' => '2012-0 ...

"Encountered a Http502 error while running the Node component (code provided for reference purposes

Encountering the Http502 error while developing a node component for chatbot. The first code snippet works flawlessly, but the second one triggers an Http502 error. Both snippets share the same host and proxy settings, with only the endpoint being differen ...

Horizontal scroll box content is being truncated

I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off. Here's the snippet of code causing the issue: function feedbackDiv(feedback_id, feedback_title, feedb ...

How can I assign integer values to specific child elements after splitting them?

Below is the HTML code that needs modification: <div class="alm-filter alm-filter--meta" id="alm-filter-1" data-key="meta" data-fieldtype="checkbox" data-meta-key="Cate" data-meta-compare="IN" data-meta-type="CHAR"> <ul> <li class=" ...

The Chrome browser's memory heap is reported to be a mere 10 MB, yet the task manager displays a whopping

When using Chrome's memory profiler, I notice that the heap size is always around 10 MB. However, the memory in my task manager keeps increasing and can reach over 1 GB if I leave my website running. Even though the heap size remains less than 10 MB w ...