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

Question

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

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

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

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

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

我尝试创建一个组件，但不知道如何在主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>

然后，您就可以调用刀片文件。

<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文件中。