How do you activate a class for individual elements within an array? [Vue.js]

Question

I want to activate a class for each input individually. I have two inputs bound to the same v-model and class. I have a method that checks for something to be true, and if true enables the bound class. Currently it enables the class on all inputs. (The end goal is to search multiple inputs for an element within an array and if it matches, the class activates only for that element)

<input v-model="highlightTest" id="1"  v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>

<input v-model="highlightTest" id="2"  v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>

Highlighting: function() {
  if (this.highlightTest != '') {
    this.active = true;
} 
else {
this.active = false;
}

I don't quite understand what you are trying to do but you'll never be able to active the class for one input individually if all the inputs are bound to the same class and the same model. Can you better explain what are you trying to accomplish? — António Quadrado
– António Quadrado, Commented Nov 18, 2016 at 15:53
Thanks for the feedback Antonio. I can show an example of what i've been able to do with jQuery in the past to get a better idea. The goal is to have input from the user generate a list of words. The list of words is put into a list. When a word from that list is typed into an input area it it highlighted individually. the issue i'm currently having trying to accomplish this with vue is that throwing the flag once the word is typed, all words under that class become active. Here's an example from some old code of mine. jsfiddle.net/aydg436k — Pyreal
– Pyreal, Commented Nov 21, 2016 at 16:12
You want the word in the list to become active or is it the input where the word was typed that you want to become active? Edit: Ok, I got it after seeing the fiddle. I'll get back to you as soon as I can if none provides and accepted answer first. — António Quadrado
– António Quadrado, Commented Nov 21, 2016 at 16:20
Thanks, I'm open to any implementation, i'm just trying to transfer my idea over within the scope of Vue. — Pyreal
– Pyreal, Commented Nov 21, 2016 at 17:07
I finally posted an answer, I hope it still relevant to you. Sorry for the delay. — António Quadrado
– António Quadrado, Commented Nov 29, 2016 at 12:13

JJPandari · Accepted Answer · 2016-11-19 01:34:49Z

How about this:

<template>
    <input v-for="(hi,index) of highlights" v-model="highlights[]" v-bind:class="{ active: highlights[index] }" v-on:keyup="highlighting(index)"></input>
</template>

<script>
export default{
    data() {
        return {
            highlights: []
        };
    },
    created() {
        this.$http.get('some/api').then(res => {
            // map: convert 0,1 to false,true
            this.highlights = res.json().map(h => h==1);
        });
    },
    methods: {
        highlighting(index) {
            if (this.highlights[index]) {
                // this.highlights[index] = false won't let vue detect the data change(thus no view change)
                this.highlights.splice(index, 1, false);
            } else {
                this.highlights.splice(index, 1, true);
            }
        }
    }
}
</script>

António Quadrado · Accepted Answer · 2016-11-29 12:19:54Z

0

Here's one way to do it (sorry for the delay btw)

HTML:

    <div id="app">
        <p :class="{'active': activateWord(word)}" v-for="word in words">@{{ word }}</p>
        <input type="text" v-model="inputText">

    </div>

CSS:

.active {
    color: red;
}

JS:

const app = new Vue({
    el: '#app',
    data: {
      inputText: '',
      words: [
        'foo',
        'bar'
      ]
    },
    methods: {
      activateWord(word) {
          return this.inputText === word
      },
    },
})

here's a fiddle

edited Nov 29, 2016 at 12:19

answered Nov 29, 2016 at 12:12

António Quadrado

1,3252 gold badges18 silver badges38 bronze badges

Collectives™ on Stack Overflow

How do you activate a class for individual elements within an array? [Vue.js]

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related