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

这样的东西

Answer 2

这是你的代码工作，我更新你的小提琴添加this语句并在event

中添加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;
            }
        }
    }

Vue.js不会自动更新

2 个答案: