mardi 21 novembre 2017

How to conditionally pass in a picture AND a child component's string

a Vue newbie here. I am constructing a navbar-brand element as part of my navbar.

<template>
  <!--Navbar-->
  <navbar position="top" className="red">
    <!-- Navbar brand -->
    <navbar-brand></navbar-brand>
...

I would like it to display its child - a string passed in between the tags, if present AND a picture, if the prop.src is not empty. How do I do that - how do I condition the render function? The code is here:

import classNames from 'classnames';

export const props = {
  tag: {
    type: String,
    default: "a"
  },
  src: {
    type: String,
    required: true
  },
  alt: {
    type: String,
    default: 'brand logo'
  },
  href: {
    type: String,
    default: '#'
  },
  className: {
    type: String
  }
};

export default {
  functional: true,
  props,
  render(h, { props, data, children }) {
    const dataObj = {
      class: classNames(
        'navbar-brand',
        props.className ? props.className : ''
      ),
      attrs: {
        href: 'props.href'
      }
    };
    const img = [
      h('img', {
        class: [],
        attrs: {
          src: props.src,
          alt: props.alt
        }
      })
    ];
    const
    return h(props.tag, dataObj, img);
  }
};

PLS HALP
Yours, Paco

Aucun commentaire:

Enregistrer un commentaire