Vue.js not updating automatically

Question

I have got this in my html code

<div class="pl_wrapper">
    <div class="options_pl">
        <input type="button" @click="optionButtonClicked" class="option_button_pl" value="List">
        <input type="button" @click="optionButtonClicked" class="option_button_pl" value="Add a language">
    </div>
    {{show2}}
</div>

And this in my vue.js

const ProgrammingLanguages = new Vue({
            el:".pl_wrapper",
            data:{
                name: "aa",
                show1: false,
                show2: false
            },
            methods: {
                optionButtonClicked(){
                    var indexOfClicked  = index(event.target,event.target.className);
                    var equalIndexOfDiv = getOnIndex(indexOfClicked,"pl_divs")
                    $(".options_pl").hide();
                    show1 = (indexOfClicked==0) ? true : false
                    show2 = (indexOfClicked==1) ? true : false
                }
            }
        });

Now when i click option_button_pl i expect {{show2}}'s to also change from false to true and vice versa.But alas that doesn't Jsfiddle: happen.https://jsfiddle.net/3akfzcyf/

you need to reference the component's data like this.show1, this.show2, etc. I'd read through the docs: vuejs.org/v2/guide — thanksd
– thanksd, Commented Aug 21, 2017 at 20:13

juanpscotto · Accepted Answer · 2017-08-21 20:13:50Z

1

you have to use the this keyword. Something like this.show1 and this.show2

answered Aug 21, 2017 at 20:13

juanpscotto

1,0601 gold badge14 silver badges32 bronze badges

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

Comments

sheplu · Accepted Answer · 2017-08-21 20:16:59Z

here is your code working and I updated your fiddle Adding the this statement and adding the event param inside optionButtonClicked

const ProgrammingLanguages = new Vue({
            el:".pl_wrapper",
            data:{
                name: "aa",
                show1: false,
                show2: false
            },
            methods: {
                optionButtonClicked(event){
                    var indexOfClicked  = index(event.target,event.target.className);
                    this.show1 = (indexOfClicked==0) ? true : false
                    this.show2 = (indexOfClicked==1) ? true : false
          console.log(this.show2)
                }
            }
        });
        function index(element,className){
        var allElements = document.getElementsByClassName(className);
        for (var i = 0; i < allElements.length; i++) {
            if(allElements[i]==element){
                return i;
            }
        }
    }

Collectives™ on Stack Overflow

Vue.js not updating automatically

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related