Javascript Vue.js不自动更新

我在我的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>

---

现在，当我点击

选项按钮时，我希望
{{show2}}
的值也会从false变为true，反之亦然
 您必须使用this关键字。类似于this.show1和this.show2的内容，您必须使用this关键字。类似这样的东西。show1和这个。show2
这是你的代码，我更新了你的小提琴
添加
此
语句并在
选项按钮中添加
事件
参数

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

const ProgrammingLanguages=新的Vue({
el:“.pl_包装器”，
数据：{
名称：“aa”，
展示1：错误，
第二场：假
},
方法：{
optionButtonClicked（事件）{
var indexOfClicked=索引（event.target、event.target.className）；
this.show1=（indexOfClicked==0）？true:false
this.show2=（indexOfClicked==1）？true:false
console.log（this.show2）
}
}
});
函数索引（元素、类名）{
var-allegements=document.getElementsByCassName（类名称）；
对于（var i=0；i
这是你的代码，我更新了你的小提琴
添加
此
语句并在
选项按钮中添加
事件
参数

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

const ProgrammingLanguages=新的Vue({
el:“.pl_包装器”，
数据：{
名称：“aa”，
展示1：错误，
第二场：假
},
方法：{
optionButtonClicked（事件）{
var indexOfClicked=索引（event.target、event.target.className）；
this.show1=（indexOfClicked==0）？true:false
this.show2=（indexOfClicked==1）？true:false
console.log（this.show2）
}
}
});
函数索引（元素、类名）{
var-allegements=document.getElementsByCassName（类名称）；
对于（var i=0；i
您需要引用组件的数据，如
this.show1
，
this.show2
，等等。我已经阅读了文档：查看浏览器控制台。您有一大堆错误。@SLaks我看不到一个错误。您需要引用组件的数据，如
this.show1
、
this.show2
，等等。我已经通读了文档：查看浏览器控制台。你有一大堆错误。@SLaks我一个也没看到