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 ?

Did you (re)search for the error-message? On MDN the TypeError is explained: Function shares a name with a pre-existing property — hc_dev
– hc_dev, Commented Jan 4, 2022 at 0:23

Nikola Pavicevic · Accepted Answer · 2022-01-03 22:45:17Z

3

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

answered Jan 3, 2022 at 22:45

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hc_dev Over a year ago

Agree on your comment ... what is your answer?

jam_es Over a year ago

You could change the data property name from infoCard to something else

mon Over a year ago

Is right , thank you man

Nikola Pavicevic Over a year ago

You are welcome mate, cheers :)

Collectives™ on Stack Overflow

Vue js . my function in methods isn't recognized

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related