how to assign default value of checkbox

hello, guys, I want to know a thing is possible or not as described below supposed have I have 3 thing illustration of frontend

     <td><input  type="checkbox" v-model="named[0]></td>
     <td><input  type="checkbox" v-model="named[1]></td>
     <td><input  type="checkbox" v-model="named[2]></td>

   fruit list     | checkbox
   ----------------------------
    apple        | checkbox        -> if this clicked passed true else pass false 
    mango     | checkbox        -> if this clicked passed true else pass false 
      orange   | checkbox        -> if this clicked passed true else pass false

suppose user clicked apple and orange checkbox and clicked on submit then v-model named should have array value like this 0:true 1:false 3:true is this possible in vue

arukomp

8 years ago

Level 10

In my opinion, it would be better to have the named property as an object with apple, mango and orange as properties, like so:

named = {
    apple: false,
    mango: false,
    orange: false
};

then your vuejs html would look something like this:

<td><input  type="checkbox" v-model="named.apple"></td>
<td><input  type="checkbox" v-model="named.mango"></td>
<td><input  type="checkbox" v-model="named.orange"></td>

arukomp

8 years ago

Level 10

or, if your list of fruits is unknown upfront and is generated on the fly as an array, it could all look something like this:

named = [
    {
        name: 'apple',
        selected: false
    },
    {
        name: 'mango',
        selected: false
    },
    {
        name: 'orange',
        selected: false
    }
];

and the html:

<td v-for="fruit in named">
    <input  type="checkbox" v-model="fruit.selected"> {{ fruit.name }}
</td>

bipin

8 years ago

Level 2

@arukomp it not working if i have array checkbox i.e if fruit name is getting from database then what should i do

arukomp

8 years ago

Level 10

@bipin use the second solution.

var fruitsFromDatabase = ...;   // get the fruits from the database

var named = fruitsFromDatabase.map(function(item) {
    return {
        name: item.name,
        selected: false
    };
});

<td v-for="fruit in named">
    <input  type="checkbox" v-model="fruit.selected"> {{ fruit.name }}
</td>

Please or to participate in this conversation.