Solución:
En realidad, es muy fácil, pero debes tener algo en cuenta. Detrás de escena, Vue convierte el marcado de su plantilla html en código. Es decir, cada elemento que ve definido como HTML se convierte en una directiva de JavaScript para crear un elemento. La plantilla es una conveniencia, por lo que el componente de archivo único (archivo vue) no es algo que pueda hacer sin compilar con algo como paquete web. En su lugar, deberá utilizar alguna otra forma de creación de plantillas. Afortunadamente, existen otras formas de definir plantillas que no requieren compilación previa y son utilizables en este escenario.
1 – literales de cadena / plantilla
ejemplo: template: '<div>{{myvar}}</div>'
2 – función de renderizado
ejemplo: render(create){create('div')}
Vue tiene varias otras formas de crear plantillas, pero simplemente no coinciden con los criterios.
aquí está el ejemplo para ambos:
AddItem.js: uso de funciones de renderizado
'use strict';
Vue.component('add-item', {
methods: {
add() {
this.$emit('add', this.value);
this.value=""
}
},
data () {
return {
value: ''
}
},
render(createElement) {
var self = this
return createElement('div', [
createElement('input', {
attrs: {
type: 'text',
placeholder: 'new Item'
},
// v-model functionality has to be implemented manually
domProps: {
value: self.value
},
on: {
input: function (event) {
self.value = event.target.value
// self.$emit('input', event.target.value)
}
}
}),
createElement('input', {
attrs: {
type: 'submit',
value: 'add'
},
on: {
click: this.add
}
}),
])
}
});
ListItem.js: uso de literales de plantilla (marcas inversas)
'use strict';
Vue.component('list-item', {
template: `<div class="checkbox-wrapper" @click="check">
<h1>{{checked ? '☑' : '☐'}} {{ title }}</h1>
</div>`,
props: [
'title',
'checked'
],
methods: {
check() {
this.$emit('change', !this.checked);
}
}
});
y el html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<script src="ListItem.js"></script>
<script src="AddItem.js"></script>
</head>
<body>
<div id="app">
<add-item @add='list.push({title:arguments[0], checked: false})'></add-item>
<list-item v-for="(l, i) in list" :key="i" :title="l.title" :checked="l.checked" @change="l.checked=arguments[0]"></list-item>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
newTitle: '',
list: [
{ title: 'A', checked: true },
{ title: 'B', checked: true },
{ title: 'C', checked: true }
]
}
});
</script>
</body>
</html>
TL; DR;
Véalo en acción en: https://repl.it/OEMt/9
No puedes. Debe usar componentes asíncronos: lea la guía aquí