[Vuejs]-V-bind object's properties in radio buttons can't render correctly

by

0👍

✅

not sure what you’re trying to achieve here, but i would recommend going over the functionality of v-bind and v-model. v-bind enables passing dynamic data to html attributes. v-on allows listening to DOM events, and v-model results in whats called – two way data binding, which is basically a combination of both v-bind and v-on. with that said, using both v-model and v-bind on the same element feel’s a bit odd.

you might achieve what you desire in the 2nd case following way:

 <template v-for="(option, index) in inputs.radioDynamicOptions">
      <input v-model="inputs.radioDynamic" type="radio" v-bind:value="option.id">
      <label :for="option.value">{{ option.label }}</label>
      <br v-if="index < inputs.radioDynamicOptions.length">
 </template>

UPDATE:

i believe that the issue your’e experiencing is a result of one main difference between object (which you can learn more about here) and primitive types.
long story short, in JavaScript primitive types like the strings you pass in case 1 are being passed by value and so behave as expected. while passing object’s to v-bind you actually pass a pointer to that object and so when you click a radio button, you manipulate the same place in memory in charge of both radio buttons, which results with the unexpected behavior you experience.

0👍

Why do you expect that v-bind="options" will work on <input/>? This form is used for custom components only.

From documentation:

Components In-Depth → Props → Passing the Properties of an Object

If you want to pass all the properties of an object as props, you can use v-bind without an argument (v-bind instead of v-bind:prop-name). For example, given a post object:

post: {

  id: 1,
  title: 'My Journey with Vue'
}

The following template:

<blog-post v-bind="post"></blog-post>

Will be equivalent to:

<blog-post

  v-bind:id="post.id"
  v-bind:title="post.title">
</blog-post>

If you want to bind dynamic/javascript values to an usual element, you should use :value="option.value" :id="option.id" as shown in your first example.

Leave a comment