具有Vue js，Symfony和语义UI的模态窗口中的处理形式

Question

我正在尝试使用Symfony4，语义UI和Vue js制作应用程序。现在，Iam努力使Vue js能够处理来自语义的模态窗口内的元素。

我在语义模态中有来自Symfony Form Builder的一些输入字段。我想防止对提交按钮执行默认操作-表单具有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>

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

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