如何根据布局和页面模板在 laravel 应用程序中分离 Vue 逻辑

Question

我有一个 laravel 应用程序和一个附加到主体的 Vue 实例（或一个 div，就在主体内部）。

const app = new Vue({
    el: '#app'
});

我认为将 Vue 实例用于与布局相关的内容（例如页眉、导航、页脚逻辑）是有意义的。

现在我有一个在特定路线上可见的表格（例如 example.com/thing/create）。我想给它添加一些逻辑，例如根据表单中的选定选项隐藏字段。这是仅适用于此表单的逻辑（不可重复使用）。我不喜欢将所有逻辑都放在表单中，而是放在 app.js 中。我可以将它放在绑定到正文的 Vue 实例中，但这听起来很奇怪，因为它只适用于更深入 dom 的形式。

我想在 blade 模板（继承布局）中保留表单标记。

我尝试创建一个组件，但不确定如何将它绑定到主 Vue 实例中。处理此表单的最佳方法是什么，将其放入 app.js 并使其结构化，将变量放入范围内。或者真的有必要移除绑定到完整布局代码的主 Vue 实例吗？

我试过类似这样的方法，但它不起作用（将它附加到 <form id="object-form"> 似乎失败了：

var ObjectForm = {
    template: function() { return '#object-form'},
    data: function() {
        return {
            selectedOption: 1
        }
    },
    computed: {
        displayField: function() {
            // return true or false depending on form state
            return true;
        }
    }
};

如果我删除#app Vue 实例或当我将所有内容直接放入应用程序 Vue 实例中时，一切正常。但这看起来很乱，如果我对另一种形式有类似的变量，它们应该分开一些。我将不胜感激关于结构（区分页面布局和页面特定表单）的一些建议，如果可能的话，一些示例将表单逻辑放在主要 app.js.

Answer 1

我希望这有助于为您分解内容并帮助您理解 Vue 模板。

最好利用Vue的组件。对你来说，它看起来像这样。这段代码有些依赖于你的文件结构，但你应该能看懂。

在您的 app.js 文件（或您的主 js 文件）中

Vue.component('myform',require('./components/MyForm.vue'));

const app = new Vue({
  el: "#app"
});

然后创建 MyForm.vue file

<template>
 <form> 
  Put Your Form Markup Here
 </form>
</template>

<script>
 // Here is where you would handle the form scripts.
 // Use methods, props, data to help set up your component
  module.exports = {
    data: function() {
        return {
            selectedOption: 1
        }
    },
    computed: {
        displayField: function() {
            // return true or false depending on form state
            return true;
        }
    },
   methods: {
     // add methods for dynamically changing form values
   }
  }
</script>

然后你就可以调用你的 blade 文件了。

<myform></myform>

Answer 2

我知道怎么做了。诀窍是使用内联模板。将视图中的表单包围起来：

<object-form inline-template>
    <form>...</form>
</object-form>

其中 object-form 是组件的名称。在上面的 ObjectForm 代码中，我删除了模板，如下所示：

var ObjectForm = {
    data: function() {
        return {
            selectedOption: 1
        }
    },
    computed: {
        displayField: function() {
            // return true or false depending on form state
            return true;
        }
    }
};

我像这样在根 vue 应用程序中附加组件：

const app = new Vue({
    el: 'body',
    components: {
        'object-form': ObjectForm
    }
});

这样我就可以使用从控制器和视图生成的表单，并且可以将它与根（附加到正文）方法和属性分开。

为了更好地组织它，我可以按照@Tayler Foster 建议的方式将 ObjectForm 存储在单独的 .vue 文件中。

如何根据布局和页面模板在 laravel 应用程序中分离 Vue 逻辑

How to seperate Vue logic in a laravel app based on layout and page templates

forms

structure

laravel

blade

vue.js