为什么函数不会在vuejs中触发click事件?

时间:2017-06-28 07:31:50

标签: javascript vue.js vuejs2 vue-component

为什么函数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>

0 个答案:

没有答案