laravel - Nesting custom tags in Vue -
i have laravel / vue app i'm building , i've run bit of snag. have been able create individual stand-alone components, when try nest stand-alone component component, nested component shows up. bit of code:
companylogo.vue
<template> <figure class="company-logo" :style="{ width: size, height: size, backgroundimage: `url(${src})` }"></figure> </template>
logouploader.vue
<template> <div class="logo-container"> <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> </div> <div class="logo-uploaded-details"> <p>last updated: {company.logo.last_updated}</p> <button class="file-browse-btn">upload image</button> </div> </template>
what's happening when in company.blade.php have
<logo-uploader></logo-uploader>
the app compiles , loads, companylogo
shows on screen. entire markup logo-uploaded-details
section isn't rendered @ all.
i have tried adding require
companylogo
component registration logouploader
component, didn't work either.
if split out components both show up. issue once they're nested.
any ideas?
vue instances , components must have single root element. in logouploader
have 2 root elements.
you need wrap them in root.
<template> <div> <div class="logo-container"> <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> </div> <div class="logo-uploaded-details"> <p>last updated: {company.logo.last_updated}</p> <button class="file-browse-btn">upload image</button> </div> </div> </template>
Comments
Post a Comment