Question

问题如下：我基本上有一个组件是'card'，我使用v-for将卡片渲染到称为'dash'的Vue中。现在，我想做的是向卡中添加一个单击事件，并且我在Component内声明了一个名为expand的方法，但尝试这样做时出现错误。我的HTML代码如下：

for xml

外部div“破折号”是Vue，已声明，每个状态都包含一组卡，这些卡是Vue组件。该组件看起来像这样

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

破折号非常简单：

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

我不确定可能是什么问题，因为我要调用的方法是在方法中定义的：{}组件“卡”本身本身不在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，仅尝试调用expand，如下所示：

@click="event_name(argument1, argument2)"

所以-对于您的情况：

@click="expand"

请确保您在组件中定义了expand方法，并且正在使用它。在这种情况下-在父组件中，而不在卡片中。

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

1 个答案: