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

admin管理员组

文章数量:1315079

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() }"?

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() }"?

• javascript
• arrays
• multi-select
• vue.js

Share Improve this question Follow asked Feb 26, 2016 at 18:07 DMackDMack 94922 gold badges1111 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 puted property:

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

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

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>

本文标签： javascriptVuejs vbind to a value within an arrayStack Overflow