为什么函数selectObjectType()
没有被触发v-on:click
事件? Html代码第7行。
Vue.component('obj', {
props: ['name'],
template: '<div>{{ name }}</div>'
})
new Vue({
el: '#app',
data: {
message: 'Please choose:',
objectType: '',
objectTypes: [
{ type: 'Cat' },
{ type: 'Dog' },
],
},
methods: {
selectObjectType: function (type) {
console.log('Function fired')
alert('Selected:', type)
this.objectType = type
}
}
})
.col {
height: 200px;
width: 45%;
cursor: pointer !important;
margin-right: 2.5%;
margin-left: 2.5%;
border-radius: 3px;
border: 1px solid lightgray;
padding: 20px;
box-sizing: border-box;
float: left;
}
.col:hover {
border-color: #000;
}
.col.choosen {
border-color: green;
}
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<obj
class="col"
v-for="object in objectTypes"
v-on:click="selectObjectType(object.type)"
:key="object.id"
:name="object.type"
:class="{ 'choosen': objectType === object.type}"
>
</obj>
</div>