Vue.js调用组件方法导致错误

Question

The problem is the following, I basically have one Component which is 'card' and I the cards are rendered inside a Vue called 'dash' using v-for. Now what I try to do is add an on-click event to the card, and I have a method called expand declared inside my Component but I get an error when I try to do so. My HTML code looks like this

    <div id="dash" class="dash" style="margin-left: 350px; margin-top:50px;">
        <div v-for="state in states" class="state slide-in-fwd-center"  v-bind:style="{'margin-left' : state.margin + 'px'}">
            <h3 class="header">{{state.state}}</h3>
            <card v-for="card in state.cards" v-bind:overall_progress="card.overall_progress" v-bind:test_progress="card.test_progress" v-bind:status="card.status" v-bind:practice_progress="card.practice_progress" v-bind:due_date="card.due_date"  v-bind:study_progress="card.study_progress" v-bind:key="card.id" v-bind:description="card.description"
                v-bind:title="card.title"   @click="$emit('expand')"></card>
        </div>
    </div>

The outer div "dash" is a Vue, that has stated and each state holds an array of cards which are Vue Components. The component looks like this

Vue.component("card", {
  props: [
    "title",
    "description",
    "due_date",
    "study_progress",
    "practice_progress",
    "test_progress",
    "overall_progress",
    "status"
  ],
  template: `TEMPLATE CODE HERE`,
  methods: {
    calcColor: function(value) {
        if(value > 89){
            return 'bg-success'
        }
        else if(value < 90 && value > 39){
            return 'bg-info'
        }
        else{
            return 'bg-danger'
        }
    },
    expand : function(){
      console.log('123')
    }
  }
});

While the dash is really simple:

var dash = new Vue({
  el: "#dash",
  data: {
    states: []
  }
});

I am not sure what might be the problem since the method I am trying to call is defined inside the methods:{} of the Component 'card' itself it is not in the Vue or global function

Answer 1

firstly it might be easier for you to bind just the whole card object and access it on card component. So instead of this:

<div id="dash" class="dash" style="margin-left: 350px; margin-top:50px;">
  <div
    v-for="state in states"
    class="state slide-in-fwd-center"
    v-bind:style="{'margin-left' : state.margin + 'px'}"
  >
    <h3 class="header">{{ state.state }}</h3>
    <card
      v-for="card in state.cards"
      v-bind:overall_progress="card.overall_progress"
      v-bind:test_progress="card.test_progress"
      v-bind:status="card.status"
      v-bind:practice_progress="card.practice_progress"
      v-bind:due_date="card.due_date"
      v-bind:study_progress="card.study_progress"
      v-bind:key="card.id"
      v-bind:description="card.description"
      v-bind:title="card.title"
      @click="$emit('expand')"
    ></card>
  </div>
</div>

you will have that:

<div id="dash" class="dash" style="margin-left: 350px; margin-top:50px;">
        <div v-for="state in states" class="state slide-in-fwd-center"  v-bind:style="{'margin-left' : state.margin + 'px'}">
            <h3 class="header">{{state.state}}</h3>
            <card v-for="card in state.cards"
             v-bind:card = "card"
             @click="$emit('expand')"></card>
        </div>
    </div>

For the event, don't use the $emit, try just to call expand, like this:

@click="event_name(argument1, argument2)"

so - for your case:

@click="expand"

Be sure, that you define expand method in the component, you are using it. in this case - in the parent component, not in the card.