No sé cuál es el error, hasta ahora estoy probando a través del registro de la consola para verificar los cambios después de seleccionar un archivo (para cargar).
Cuando ejecuto $ npm run watch , aparece el siguiente error:
"Webpack está viendo los archivos...
95% emitiendo
ERROR No se pudo compilar con 1 error
19:42:29error en ./resources/assets/js/components/File.vue
(Valor emitido en lugar de una instancia de Error) Error de sintaxis de la plantilla de Vue:
La plantilla de componente debe contener exactamente un elemento raíz. Si usa v-if en varios elementos, use v-else-if para encadenarlos.
@ ./resources/assets/js/components/AvatarUpload.vue 5:2-181 @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/ sass/aplicación.scss"
Mi archivo.vue es
<template> <div class="form-group"> <label for="avatar" class="control-label">Avatar</label> <input type="file" v-on:change="fileChange" id="avatar"> <div class="help-block"> Help block here updated 4 🍸 ... </div> </div> <div class="col-md-6"> <input type="hidden" name="avatar_id"> <img class="avatar" title="Current avatar"> </div> </template> <script> export default{ methods: { fileChange(){ console.log('Test of file input change') } } } </script>¿Alguna idea sobre cómo resolver esto? ¿Cuál es realmente el error?
Nota Esta respuesta solo se aplica a la versión 2.x de Vue. La versión 3 ha eliminado esta restricción .
Tienes dos elementos raíz en tu plantilla.
<div class="form-group"> ... </div> <div class="col-md-6"> ... </div>Y necesitas uno.
<div> <div class="form-group"> ... </div> <div class="col-md-6"> ... </div> </div>Esencialmente , en Vue debe tener solo un elemento raíz en sus plantillas .
Para una respuesta más completa: http://www.compulsivecoders.com/tech/vuejs-component-template-should-contain-exactly-one-root-element/
Pero básicamente:
Para instalarlo:
npm install vue-fragmentPara usarlo:
import Fragment from 'vue-fragment'; Vue.use(Fragment.Plugin); // or import { Plugin } from 'vue-fragment'; Vue.use(Plugin);Luego, en tu componente:
<template> <fragment> <tr class="hola"> ... </tr> <tr class="hello"> ... </tr> </fragment> </template>Debe envolver todo el html en un solo elemento.
<template> <div> <div class="form-group"> <label for="avatar" class="control-label">Avatar</label> <input type="file" v-on:change="fileChange" id="avatar"> <div class="help-block"> Help block here updated 4 🍸 ... </div> </div> <div class="col-md-6"> <input type="hidden" name="avatar_id"> <img class="avatar" title="Current avatar"> </div> </div> </template> <script> export default{ methods: { fileChange(){ console.log('Test of file input change') } } } </script>