使用 Vue js、Symfony 和 Semantic UI 在模态 window 中处理表单

Question

我正在尝试使用 Symfony4、Semantic UI 和 Vue js 制作一个应用程序。现在，我正在努力让 Vue js 处理来自 Semantic 的模态 window 内的元素。

我在语义模态中有一些来自 Symfony 表单构建器的输入字段。我想阻止提交按钮的默认操作 - 表单具有 v-on:submit.prevent="onSubmit" 属性。 onSubmit 函数只是 e.preventDefault() 代码。

当我打开模式并尝试点击该按钮时，它只是忽略该代码并重新加载页面，因为它认为我点击了提交按钮（我点击了提交按钮，但我想在 Vue 中调用 onSubmit 方法）。

有人可以帮助如何让它工作吗？谢谢。

作为树枝模板的代码：

<a class="ui button add-client-button" @click="openModal">
  <i class="plus icon"></i>
  Add client
</a>

<div class="ui tiny modal add-client">

    <div class="header">Add client</div>
         <div class="content">

         {{ form_start(client_form, { 'attr' : { 'class': 'ui form', 'v-on:submit.prevent' : 'onSubmit' }} ) }}
    ...some form inputs...
         </div>
    <div class="actions">
            <button class="ui black deny button">Close</button>
            <button class="ui button add-client-modal-button" @click="onSubmit">Add</button>
        </div>
</div>

代码 Vue js:

new Vue({
delimiters: ['@{', '}'],
el: '#app',
data: {
    modalDom: null
},
mounted: function() {
    this.modalDom = $('.ui.tiny.modal.add-client').modal({ inverted: false, closable: false });
},
methods: {
onSubmit: function (e)
{
    e.preventDefault();
    console.log('hey')
},
openModal: function()
{
    this.modalDom.modal('show');
}
});

完整代码：https://www.codepile.net/pile/D7ooyW7j

Answer 1

因为你在 Vue 中使用 el: '#app'，你需要一个 id="app"

的包装元素

<div id="app">
    <!-- all of your html / template here... -->
</div>

您的 methods 属性似乎缺少右大括号 }:

new Vue({
  ...
  methods: {
    onSubmit: function (e)
    {
      e.preventDefault();
      console.log('hey')
    },
    openModal: function()
    {
      this.modalDom.modal('show');
    }
  } // <-- missing
});

而且我不确定 form_start() 到底在做什么，但只要你得到这样的东西就应该没问题：

<form class="ui form" v-on:submit.prevent="onSubmit">
  <!-- inputs -->
</form>

Answer 2

我成功了。我已经声明了两次模态实例，第一次是在 jQuery 中，这就是问题所在——它覆盖了我在 Vue 中的第二个实例。我删除了 jQuery 中的模态声明，现在可以使用了。

使用 Vue js、Symfony 和 Semantic UI 在模态 window 中处理表单

Processing form in modal window with Vue js, Symfony and Semantic UI

javascript

php

semantic-ui

vue.js

symfony4