How can I make in array in vue component?

Question

My vue component like this :

<template>
    ...
        <ul class="list-unstyled">
            <li v-for="category in categories">
                ... 
                    <input type="checkbox" :value="category.id" :checked="category.id in_array(categoryCountry)">  
                ...
            </li>
        </ul>
    ...
</template>

<script>
    export default {
        props: ['categoryCountry', 'categories'],
    }
</script>

I want to change condition in the input

categoryCountry is array, for example array(1,2,3)

So if category.id in array of categoryCountry, then it will checked

How can I do it?

Kenneth · Accepted Answer · 2017-10-20 02:40:55Z

2

The best and simple answer. using "includes" it check if the data exist in array.

example:

[].includes(something);

answer on your codes.

<input type="checkbox" :value="category.id" :checked="categoryCountry.includes(category.id)">

answered Oct 20, 2017 at 2:40

Kenneth

3,0134 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user618509 Over a year ago

which is exactly what I wrote

user618509 · Accepted Answer · 2017-10-20 01:45:22Z

0

using v-if you can pass a function so, you can make a method in vue that checks your array like

checkInArray: (needle, haystack) {
    return haystack.includes(needle)
}

The on your input

<input v-if="checkInArray(categoryCountry, categories)"

Array.prototype.includes() returns a bool true/false which is enough to satisfy a conditional v-if

answered Oct 20, 2017 at 1:45

user618509

5061 gold badge5 silver badges17 bronze badges

Comments

ricardoorellana · Accepted Answer · 2017-10-20 02:36:30Z

If you receive an array and you need to display each item of the array as an input checkbox you should iterate through each array item:

// Template example
<div id='check_box_sample'>
  <div v-for="category in categoryCountries">
    <input 
      type="checkbox" 
      :id="category"
      :value="category"
      v-model="checkedCategories">
    <label 
      :for="category">
      {{ category }}
    </label>
  </div>
  <br>
  <span>Checked names: {{ checkedCategories }}</span>
</div>

So for each iteration on the v-for="category in categoryCountries" you create an input type checkbox, you have to define an id :id="category" and a value :value="category"since this is only a simple example I just use the same array item.

You may want to see a working example

I hope this help you.

Collectives™ on Stack Overflow

How can I make in array in vue component?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related