What is the best way to save an object as a value for a radio input in Vue?

Question

What is the best way to save an object as a value for a radio input in Vue?

Looking to store values from an array of objects into radio inputs in Vue.js? Here's what I have:

const plans = [{type:'2'},{type:'3'},{type:'1'}]

I attempted the following approach:

<input type="radio" v-model="pick" :value="plans[0]" />
<input type="radio" v-model="pick" :value="plans[1]" />
<input type="radio" v-model="pick" :value="plans[2]" />

Unfortunately, this resulted in the error message:

Invalid prop: type check failed for prop "value". Expected String, Number, got Object

Do you have any suggestions on how to overcome this issue? Thanks!

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

If my understanding is correct, you can use the code snippet below:

const app = new Vue({
  el: "#demo",
  data: {
    selectedOption: null,
    items: [{value:'option1'}, {value:'option2'}, {value:'option3'}]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="demo">
  <div v-for="item in items" :key="item.value">
    <input type="radio" v-model="selectedOption" :value="item" />
    <label for="">{{ item.value }}</label>
  </div>
  {{ selectedOption }}
</div>

Answer 2

If my understanding is correct, you can use the code snippet below:

const app = new Vue({
  el: "#demo",
  data: {
    selectedOption: null,
    items: [{value:'option1'}, {value:'option2'}, {value:'option3'}]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="demo">
  <div v-for="item in items" :key="item.value">
    <input type="radio" v-model="selectedOption" :value="item" />
    <label for="">{{ item.value }}</label>
  </div>
  {{ selectedOption }}
</div>

What is the best way to save an object as a value for a radio input in Vue?

Answer №1

Similar questions

Syntax error triggered and caught by ajaxError

Getting your routing to function properly in React.js involves setting up routes for different

Retrieve information from every nested array and present it in sequential order

Tips for effectively handling numerous iterations of an identical NPM dependency

The Angular Material md-input-container consumes a significant amount of space

Incorporating an image into a cell within a jqxgrid

Is there a way to automatically start a YouTube video using JavaScript?

Wordpress causing Jquery to malfunction; PHP function not executing

The code inside the if statement is somehow executing even when the if statement is not true

Incorporate a PHP variable into JavaScript

Efficiently Managing Errors on REST Server

What is the best method for rotating segments in THREE.TubeGeometry?

Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

AngularJS routing with html5mode causing 404 error when using htaccess

Authentication using SPA RSA 2048 encryption technology

jqGrid - Error when the length of colNames and colModel do not match!

The setInterval function in JavaScript fails to update the result

Issue encountered while invoking a jQuery function with JavaScript

Is there a way to use Selenium to automate the clicking of two buttons with empty href attributes? Each button has a function name and arguments within the href

Obtaining chargePermissionId in Amazon Pay Integration without the need to capture or create chargeId