Vue js . my function in methods isn't recognized

Question

i have this Vue component but i don't understand the problem:

<template>
    <div>
        <div class="all-cards" >
            <template v-for="(card,index) in res" >
                <div class="cards-new "  draggable="true" :data-id="card.id" @click="infoCard(index)" :key="card.id">
                    <div class="image-card"></div>
                    <div class="titles-card"> 
                        <p>{{card.title}}</p>
                    </div>
                    <div class="footer-card">
                        <div class="circle-people-card"></div>
                    </div>
                </div>
            </template>    
        </div>
        <card-info descriptionCard="hi" idInfo="2" titleCard="sua"></card-info>
    </div>
</template>

<script>
import axios from 'axios';
import CardInfo from './CardInfo.vue'
export default {
  name: 'Card',  
  components:{
      CardInfo
  },
  data(){
      return{
        uri : 'http://localhost:8000',
        res: [],   
        infoCard:'' 
    }
  },
  methods:{
      infoCard: function(clickedId){
          return this.infoCard = clickedId;
      }
  },
  mounted(){
      let url = this.uri + "/ajax/field-info"
      axios.get(url).then((msg) => {
           this.res = msg.data
      });
  }
}
</script>

<style>

</style>

Continue to return me this error:

TypeError: t.infoCard is not a function at click (app.f815278e.js:1) at Xe (900.23d000da.js:2) at HTMLDivElement.n (900.23d000da.js:2) at HTMLDivElement.o._wrapper (900.23d000da.js:2)

Can anyone help me?

Answer 1

You can not have same name infoCard for data property and method, change one and then try.