iterate through all the items in the radioButton collection

Hello, I am looking to iterate through this object and display checkbox values along with their indices.

 data: [
        {
        key1: 'last 6 months'
      },
      {
        key2: 'last 30 days'
      }
    ]

I would like to create radio buttons that look like this:

° last 6 months

° last 30 days

This is what I have in my code:

                  <div
                    v-for="index in data"
                    :key="index.id"
                  >
                    <radio-button
                      v-model="date"
                      :value="index"
                      :label="index.key1"
                    />
                  </div>

Currently, my results show:

° key1

° key2

I want to retrieve the value in the label, not the key, because the key is sent to the API.

Please help, thank you!

javascriptvue.js

Answer №1

Traverse through an object

When traversing an object using v-for, the object value comes first, followed by the object key. As each object key is unique, it can be utilized as the key binding:

<div v-for="(value, key) in data" :key="key">

The label attribute of <radio-button> needs to be linked to the object value (which contains descriptive text), while the value attribute could be associated with either the object value or object key, depending on the desired reflection in v-model:

<radio-button v-model="date" :value="key" :label="value" />

The end outcome should resemble this:

<div v-for="(value, key) in data" :key="key">
  <radio-button name="my-date" v-model="date" :value="key" :label="value" />
</div>

demo 1

Traverse through an array of objects

Include the above solution within another v-for. The outer v-for iterates over the array, while the inner one traverses through the objects within the array:

<template v-for="item in data">
  <div v-for="(value, key) in item" :key="key"gt;
    <radio-button name="my-date" v-model="date" :value="key" :label="value" />
  </div>
</template>

demo 2

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

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

javascripthtmlstoragepersistent

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?

As I work on developing a website for a pet rescue charity using Next.js, I am facing an issue with getting my button or link to function correctly. Every time I try to navigate to another page within my Next.js app, I encounter a 404 error stating "This p ...

javascriptbuttonnext.jsnext.js13

What is the best way to sequentially slide down multiple elements with a time delay in between each one?

I have multiple div elements with the same class. I have selected them all and I am iterating through each one to slide down every element. My goal is to first slide down the initial element, then introduce a delay before moving on to the next slide. Here ...

javascriptjquery

Changing a particular field value within an array of objects in Angular 4

I have a scenario where I created a class called security: class security { public id:number; public name:string; } Next, I initialized an array of security objects: let s:security[]=[{id:1,name:'Alex'},{id:2,name:'John'},{id:3,nam ...

javascriptangular

Updating the selected value in TomSelect based on an ajax response

I am facing an issue setting a value on TomSelect using ajax response. Normally, I would use the following code on a general dropdown: $('#homebasepeg').val(data.hmb_id).change(); However, when I try to apply this on TomSelect, it doesn't s ...

javascriptphpjsonajaxtom-select

What is the reason behind utilizing arrow functions in React event handlers?

function ButtonIncrement(){ const [count,setCount] = useState(0); render(){ <div> <h3> <button onClick={() => setCount(count+1)}>Increase count for amusement</button> <p>Total C ...

javascriptreactjsevent-handlingarrow-functions

Guide to crafting your own Chrome browser extension

I have a question that is giving me some trouble. I am working on developing a Chrome extension that will track and update the number of times a specific website has been visited or clicked in a database. I want this count to be displayed before the site i ...

javascriptajaxgoogle-chrome-extension

How can you selectively conceal the nth item in a v-for loop while keeping the original array intact? Discover a way to do this using the search function

I have a reference variable called foxArticles that holds a list containing 100 items. Using a v-for loop, I iterate over each value and render all 100 values on the page. <template> <div class="news_container"> <div v- ...

javascriptvue.js

Expanding the functionality of Jquery with extend or bind techniques

Can someone clarify whether I should be using .bind() or .extend() and provide guidance on how to implement it? I am working with two checkboxes where a process is triggered once they are checked. In addition, there is a button that, when clicked, will ch ...

javascriptjquery

Use `$$state: {…}` within the request rather than the data

When attempting to send a request with data, I am only getting "f {$$state: {…}}" in the console. $scope.createTask = function () { var req = $http.post('api/insert', { title: $scope.newTitle, description: ...

javascriptnode.jsangularhttppost

Utilizing Page Methods

I have encountered an issue while using an ajax callback for a void method. When I try to call another method within the calling method, I get an error. Any assistance with resolving this problem would be greatly appreciated. Here is the code snippet: ...

javascriptasp.netajaxjquery

Looking for assistance with passing values to the parent component in VUE

I am seeking assistance with my first Vue app, and as a beginner, I acknowledge that there is much I have yet to learn. Initially, I started this project by following a tutorial as part of a course, but unfortunately, the course did not cover what I am cur ...

vue.jscomponents

What steps should be taken when handling an AJAX request that returns a false result from PHP?

I need help with a form I'm creating that includes a text box labeled "mobileNo" to search for records in a PHP database using AJAX. When a record is found, it should display "Record found". If no record is found and PHP echoes "Record not found", I w ...

javascriptphpjqueryajax

Cheerio in node.js encounters a problem while reading HTML files

I am brand new to JavaScript and I've hit a roadblock with Node Cheerio. Any assistance would be greatly appreciated. The code I'm currently working on can be found here: https://github.com/zafartahirov/bitstarter. Once the issue is resolved, t ...

javascriptnode.jsnpmcheerio

To display the user's input value in the console log upon clicking

Having trouble displaying the user's input value in the console when the button is clicked. function submit(){ var userInput = document.getElementById('input_text').value; console.log(userInput); } ...

javascriptjquery

Ways to link numerous sockets within a single Vue.js project?

import VueSocketIOExt from 'vue-socket.io-extended'; import { io } from 'socket.io-client'; const socketOne = io('http://localhost:3200/'); const socketTwo = io('http://localhost:3100/'); Vue.use(VueSocketIOExt, so ...

javascriptvue.jswebsocketvuexvue-socket.io

Implementing dynamic option selection in Vue using JavaScript and v-model

Is there a way to manage the chosen value in a v-modeled select tag using vue.js? I created a jsFiddle demonstration, but unfortunately, it is not functioning correctly. This leads to my inquiry: vm.$set('selected', '1') // does not wo ...

javascriptvue.js

WebDriver encounters difficulty clicking on a certificate error popup window

Currently, I am using webdriver 2.40.0 in C# to interact with my company's website. The issue arises when I encounter a certificate error page while trying to access certain elements. Specifically, after clicking the override link and entering some in ...

c#javascriptseleniumselenium-webdriver

Issues with angular-strap popover's onBeforeShow function not functioning as expected in Angular

I am currently utilizing the angular-strap popover feature. To learn more about it, visit According to the documentation, when an onBeforeShow function is provided, it should be called before the popover is displayed. However, I am experiencing issues wit ...

javascriptangularjspopoverangular-strap

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs