如何在基於佈局和頁面模板的laravel應用程序中分離Vue邏輯

Question

我有一個laravel應用程序和一個Vue實例附加到主體（或一個div，就在主體內部）。

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

我認爲使用Vue實例來處理與佈局有關的東西（例如頁眉，導航，頁腳邏輯）是有意義的。

現在我有一個窗體在特定路線上可見（例如example.com/thing/create）。我想添加一些邏輯，例如根據表單中選定的選項隱藏一個字段。這是邏輯意味着這種形式（不被重用）。我不想把所有的邏輯內聯到表單上，而是放在app.js中。我可以將它放入綁定到body的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

我發現如何去做。訣竅是使用內聯模板。在視圖中環繞窗體：

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

Answer 2

我希望這有助於爲你打破一切，幫助你理解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>