Vue.js v-bind to a value within an array

Question

I'm just getting started with Vue.js; impressed by what it can do, but having trouble parsing the basics out of the documentation.

Assuming some checkboxes or a select[multiple]:

<label><input v-model="fruits" type="checkbox" value="apple"> apple</label><br>
<label><input v-model="fruits" type="checkbox" value="orange"> orange</label><br>
<label><input v-model="fruits" type="checkbox" value="banana"> banana</label><br>

Bound to an array in a Vue model:

var vm = new Vue({
    el: '#foo',
    data: {
        fruits: ['orange'],
    },
});

I want to manipulate the classes on some other elements based on what is or isn't in the vm.$data.fruits array. I can't figure out the syntax to use with v-bind:class to check within the fruits array. I'm guessing it's something like this:

<div id="myfruits" v-bind:class="{ 'apple': fruits.apple, 'banana': fruits.banana, 'orange': fruits.orange }">fruits</div>
<div id="apple" v-bind:class="{ 'banana': fruits.banana }">You've got bananas!</div>

I'm sure there must be a way to do this inArray kind of logic with v-bind. If not, can I refer to a method instead of a value? Like v-bind:class="{ 'orange': hasOranges() }"?

Solution 1

Just to build on Linus's answer, there are a couple other ways you can handle this.

You can put the check in your binding expression:

<div id="apple" v-bind:class="{ 'banana': fruits.indexOf('banana') > -1 }">You've got bananas!</div>

If, as in one of your examples, the class names match the fruit values bound to your checkboxes, you can bind directly to the fruits array:

<div id="myfruits" v-bind:class="fruits">fruits</div>

Or, if your class names are different than the fruits, you can bind to a computed property:

<div id="myfruits" v-bind:class="classes">fruits</div>

new Vue({
    el: '#app',
    data: {
        fruits: ['orange'],
    },
    computed: {
        classes: function() {
          return  {
            'has-banana': this.fruits.indexOf('banana') > -1,
            'has-apple': this.fruits.indexOf('apple') > -1,
            'has-orange': this.fruits.indexOf('orange') > -1
          };
        }
    }
})

Solution 2

create a method that checks the fruits array with #indexOf() weither it contains the fruit.

var vm = new Vue({
    el: '#foo',
    data: {
        fruits: ['orange'],
    },
    methods: {
     hasFruit(fruit) {
      return this.fruits.indexOf(fruit) === -1 ? false : true 
     }
    }
});

<div id="myfruits" v-bind:class="{ 'apple': hasFruit('apple'), 'banana': hasFruit('banana'), 'orange': hasFruit('orange') }">
  fruits
</div>

Comments

[DMack]

Thanks! Does that mean there's no shorthand way to do that without the method, though?

[Linus Borg]

Didn't know about the second shorthand, nice!

[Linus Borg]

Generally not, but see Peter's reply for a shorthand version for special cases where the items of the array would also be the class names.