Метод компонента вызова Vue.js приводит к ошибке

Question

Проблема заключается в следующем, у меня в основном есть один Компонент, который является «картой», и я отображаю карты в Vue, называемом «тире», используя v-for. Теперь я пытаюсь добавить событие «щелчок мышью» на карточку, и у меня есть метод с именем expand, объявленный внутри моего компонента, но я получаю сообщение об ошибке, когда пытаюсь это сделать. Мой HTML-код выглядит так

    <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>

Внешний div "dash" - это Vue, в котором указано, что каждое состояние содержит массив карт, которые являются Vue Components. Компонент выглядит так

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')
    }
  }
});

Хотя черта действительно проста:

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

Я не уверен, в чем может быть проблема, так как метод, который я пытаюсь вызвать, определен внутри методов: {} самого компонента 'card', его нет в Vue или глобальной функции

Answer 1

во-первых, вам может быть проще связать только весь объект карты и получить к нему доступ в компоненте карты.Таким образом, вместо этого:

<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>

у вас будет это:

<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>

Для события не используйте $ emit, попробуйте просто вызвать расширение, например так:

@click="event_name(argument1, argument2)"

так - для вашего случая:

@click="expand"

Убедитесь, что вы определяете метод расширения в компоненте, который вы используете.в данном случае - в родительском компоненте, а не в карточке.