vue.js - vue 组件不加载方法？

问题描述

我尝试对“add”-mode 和“edit”-mode 使用相同的 vue 表单组件来避免两次制作相同的表单。

逻辑是这样的：

如果数据存在，则主组件“历史”从后端（Laravel）加载数据加载“列表”组件并通过道具传递数据，模式为“编辑”。

如果没有数据加载表单并且模式为“添加”。

历史.vue

<div v-if = "this.educations.length >0 ">
   Status: {{ status }}
   <list :educations="educations" :mode="mode.editvalue"> </list>
</div>
<div v-else>
   <eduform :mode ="mode.addvalue"> </eduform>
</div>

这部分很简单，工作正常。
在 eduform-component 内部，我有两个按钮，它们显示依赖模式。

v-show="mode === 'add'"或者v-show="mode === 'edit'"

问题出在我的形式上：它完全扼杀了我的方法！

<form @submit.prevent="mode === 'add' ? createEdu() : updateEdu() ">

这是我的方法：

createEdu() {
  console.log(this.mode);
  this.axios
    .post(`/api/education/add/`, this.education)
    .then((response) => {
      this.$router.push({
        name: 'education'
      })
    })
    .catch(error => console.log(error))
}

这段代码有什么问题？谢谢你。

标签： vue.js

我个人的意见是：尽可能避免在模板中使用三元运算符。submit您应该简单地将泛型方法绑定到提交事件，而不是有条件地将方法绑定到您的事件。然后，在泛型方法本身中，您将执行任何必要的检查以调用适当的回调。这使您的模板更具可读性，并将复杂的逻辑抽象到 VueJS 组件的 JS 部分。

例子：

<form @submit.prevent="onFormSubmit">

然后，在组件的 JS 部分，您可以执行以下操作：

onFormSubmit() {
  if (this.mode === 'add')
    this.createEdu();
  else
    this.updateEdu();
}

vue.js - vue 组件不加载方法？

问题描述

解决方案

推荐阅读