Question

我有一个传入数据的组件，然后我需要在点击时将该数据从true更改为false。我为此创建了一个名为toggleClass的方法，但它不起作用，我没有收到任何错误。

Vue.component('moustache', {
name: 'moustache',
props: ['type', 'img'],
template: `<li>
    <p><strong>@{{ type }}</strong></p>
    <img width="300" height="200" src="/img/image.jpg">
    <button class="btn btn-primary" v-bind:class="{ active: isActive }" :data-type="type" @click="toggleClass">Vote</button>
    </li>`,
data: function(){
    return{
        isActive: false
    }
},
methods: {
    toggleClass(){
            isActive: true
    }
}
});

new Vue({
    el: '#app'
});

Answer 1

您需要使用this以便可以访问组件属性：

toggleClass(){
     this.isActive = !this.isActive;
}

Answer 2

这不是toggleClass的工作原理，必须有一个这个参数的命令，你需要在参数中将它设置为true，否则它会卡在参数上。

你能试试吗

methods: {
    toggleClass(true){
       //     isActive: true
    }
}
});

Vue js - 获取在组件中工作的方法

2 个答案: