Как вы можете объединить все маршруты, шаблоны и компоненты Vue.js в один файл?
Я пытаюсь составить пример Vue.js, который объединяет все в один файл. По сути, я пытаюсь доказать эффективность небольшого бункера, который обслуживает более одного маршрута. Это то, что у меня есть до сих пор:
<html>
<head>
<meta name = "viewport" content = "width=device-width" />
<title>Index2</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
</head>
<body>
<div class = "container">
<div id = "app">
<h1>Hello App!</h1>
<p>
<router-link to = "/foo">Go to Foo</router-link>
<router-link to = "/categories">Categories</router-link>
</p>
<router-view></router-view>
</div>
</div>
<script>
const Foo = { template: '#foo' }
const Categories = {
template: '#Categories',
data: {
categories: [{ title: "blah" }, {title:"yack"}]
},
methods: {
saveNew: function(event) {
alert("boo!");
}
}
}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/Categories', component: Categories }
];
const router = new VueRouter({
routes: routes,
mode: 'history',
base: '/forums/admin/index2/'
});
const app = new Vue({
router
}).$mount('#app');
Vue.config.devtools = true;
</script>
<template id = "foo">
<div>foo</div>
</template>
<template id = "Categories">
<div class = "form-inline">
<input type = "text" name = "newCategoryTitle" class = "form-control" />
<input type = "button" v-on:click = "saveNew" value = "AddNew" class = "btn btn-primary" />
</div>
<ul>
<li v-for = "category in categories">{{category.title}}</li>
</ul>
<table class = "table">
<tr v-for = "category in categories">
<td>{{category.title}}</td>
<td><input type = "button" value = "Edit" class = "btn btn-primary" /></td>
<td><input type = "button" value = "Delete" class = "btn btn-primary" /></td>
</tr>
</table>
</template>
</body>
</html>
https://jsfiddle.net/jeffyjonesx/sd79npwb/1/
Вот в чем проблема: данные в компоненте «Категории» не привязываются к шаблону, где я пробовал и ul, и таблицу. Еще более странно, если я передам ul на первое место в шаблоне, он сломается. Однако обработчик кнопки на загруженной форме работает.
Я чувствую, что неправильно понимаю объявление шаблонов, но я не уверен, как это сделать.
Также шаблоны должны быть внутри X-шаблоны
Я обновил ваш пример jsfiddle
@ljubadr В чем преимущество использования здесь x-шаблона? В документах говорится, что «это может быть полезно в демонстрациях или небольших приложениях», но не говорится, что как это полезно. В случае, если <template> недоступен, конечно, но это здесь не применимо, и я не могу думать ни о чем другом.
<template> изначально поддерживается не во всех браузерах, подробнее в этом проблема с гитхабомЯ вообще не могу заставить его работать в IE, но это не теги шаблона, а то, что он задыхается, превращая параметр данных в функцию. Консоль говорит Expected: ':' в скобках для data().
Неважно... Я все время забываю, что IE не любит стенографию функций.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Шаблоны могут иметь только один корневой элемент. Vue видит первый элемент, div.form-inline, и игнорирует все остальное. Оберните шаблон одним тегом <main> (div тоже работает, но семантика!)
<template id = "Categories">
<main>
<div class = "form-inline">
<input type = "text" name = "newCategoryTitle" class = "form-control" />
<input type = "button" v-on:click = "saveNew" value = "AddNew" class = "btn btn-primary" />
</div>
<ul>
<li v-for = "category in categories">{{category.title}}</li>
</ul>
<table class = "table">
<tr v-for = "category in categories">
<td>{{category.title}}</td>
<td><input type = "button" value = "Edit" class = "btn btn-primary" /></td>
<td><input type = "button" value = "Delete" class = "btn btn-primary" /></td>
</tr>
</table>
</main>
</template>
Еще одно замечание: вы используете версию Vue производство (vue.min.js). При разработке используйте версию Vue для разработки (vue.js), чтобы получать предупреждения о подобных проблемах.
Спасибо, я полностью прочитал это с предположением, что содержащий тег шаблона был единственный корень.
Проверьте Базовый пример компонентов, а также данные ДОЛЖНЫ БЫТЬ функцией.