javascript - Vue.js 没有自动更新

Question

我已经在我的 html 代码中得到了这个

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

这在我的 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
                }
            }
        });

现在，当我点击 option_button_pl 时，我希望 {{show2}} 也从 false 更改为 true，反之亦然。但可惜 Jsfiddle 没有:发生。 https://jsfiddle.net/3akfzcyf/

Answer 1

你必须使用this关键字。像 this.show1 和 this.show2 这样的东西