添加组件。为什么这不起作用？

Question

下面的代码正是我想要做的，即当我点击一个按钮时动态添加一个组件。

问题是我想创建一个函数来添加组件而不是内联表达式。但是，它不起作用。请有人教育我。

<add-exercise :days="days" transition="fade" v-for="component in components" :exerciseplan_id="exerciseplan_id"></add-exercise>

<button v-if="components < 7" @click.prevent="components++">Add</button>
<button v-else="submit" transition="fade">Submit</button>

</template>


data() {

       return {

          components:1,

},
components:{ AddExercise },

不起作用的代码

<button v-if="components < 7" @click.prevent="addComponent">Add</button>

methods: {
 addComponent: function(){
   return this.components++
}
}

Answer 1

问题出在你的方法上。你不需要返回，只需要运行你想要的动作，像这样：

methods: {
  addComponent: function(){
    this.components++;
  }
}