Vue.js failing to update in real-time

Question

Vue.js failing to update in real-time

Within my HTML code, I have the following:

<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>

In my Vue.js file, I have the following:

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
                }
            }
        });

When clicking on option_button_pl, I expect that {{show2}} will change from false to true and vice versa. However, this is not happening as expected. Here is the Jsfiddle link for reference: https://jsfiddle.net/3akfzcyf/

javascript vue.js

Answer 1

Answer №1

To reference the current instance, utilize the "this" keyword. For example, you can access functions like this.show1 and this.show2.

Answer 2

To reference the current instance, utilize the "this" keyword. For example, you can access functions like this.show1 and this.show2.

Answer 3

Answer №2

Check out the updated code snippet below with added functionality: I have made some adjustments to your code and included the this statement as well as the event parameter inside the optionButtonClicked function.


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;
        }
    }
}

Answer 4

Check out the updated code snippet below with added functionality: I have made some adjustments to your code and included the this statement as well as the event parameter inside the optionButtonClicked function.


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;
        }
    }
}

Vue.js failing to update in real-time

Answer №1

Answer №2

Similar questions

AngularJS ng-repeat - cascading dropdown not refreshing

Designing a file upload progress bar with the help of jquery and ajax

Utilize the filtering functionality in AngularJS to narrow down the search results

Issue with Laravel Vue search-dropdown and other components failing to render correctly for certain users

State of loading getServerSideProps in Next.js

JavaScript's Ajax request seems to be stagnant and inactive

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Intermediary Server Facilitating Video Negotiation in WebRTC Piping

Retrieve the user_id without triggering any route

JavaScript: The Battle of Anonymity - Anonymous Functions vs Helper

A guide to accessing and managing events for the child inside a div element using extjs4

Utilize a pipe to seamlessly transfer data from MSSQL to a Node.js application

Error: Vue Loader Unable to find module '@'

Creating a line graph using chart.js and JSON dataset

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

What is the top choice for creating a cutting-edge front-end web module?

AngularJS routing with html5mode causing 404 error when using htaccess

How to manage UNC paths and "mapped network drives" within an Electron application?

Cutting Out Sections of a List

Events for the UserManager in Vue.js with oidc-client-ts are failing to trigger