[英]Vue.js - How to get “this” object in componenet?
console.log(this) in doSomthing method, it is displayed "null". console.log(this)在doSomthing方法中,显示为“null”。
I thought of console.log(this.currentPage) is displayed "main" but "this" object is null.. :( 我想到console.log(this.currentPage)显示“main”但“this”对象为null .. :(
How to access "main" of currentPage? 如何访问currentPage的“主要”?
<template>
<div class="tab_menu_wrap">
<ul class="tab_menu">
<li v-for="tab in tabMenus" v-bind:class="{ active: tab.isActive }" v-on:click="doSomthing">
{{ tab.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'tab-menu',
props: {
},
data() {
return {
currentPage: "main",
isActive: true,
tabMenus: [
{
text: 'A',
isActive: true
},
{
text: 'B',
isActive: false
},
{
text: 'C',
isActive: false
}
],
doSomthing: function(e){
console.log(this)
}
};
},
method: {
},
computed: {
}
};
</script>
I think data() should only have the state of your component, no actions. 我认为data()应该只有组件的状态,没有动作。 Try moving your doSomething to methods in your component, like:
尝试将doSomething移动到组件中的方法,例如:
<template>
<div class="tab_menu_wrap">
<ul class="tab_menu">
<li v-for="tab in tabMenus" v-bind:class="{ active: tab.isActive }" v-on:click="doSomething">
{{ tab.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'tab-menu',
props: {
},
data() {
return {
currentPage: "main",
isActive: true,
tabMenus: [
{
text: 'A',
isActive: true
},
{
text: 'B',
isActive: false
},
{
text: 'C',
isActive: false
}
]
};
},
methods: {
doSomething: function(e){
console.log(this)
}
},
computed: {
}
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.