JSFiddle - React, Tailwind, and code Playground

vuejs 2

by Warwick Grigg

HTML

<script src="https://unpkg.com/vue@next/dist/vue.js"></script>

<div id="app">
    <p> Vue component. Space expected between buttons but none shown:</p>
    <vsf-controls :value="{'Sign in': true, 'Cancel': true}"></vsf-controls>
    <p> Conventional HTML layout, 2 lines, space expected between buttons and is shown:</p>
    <div>
      <button>Sign in</button>
      <button>Cancel</button>
    </div>
    <p> Unconventional HTML layout, 1 line, buttons on same line show no space:</p>
    <div>
      <button>Sign in</button><button>Cancel</button>
    </div>
    <p>How to make a component for buttons equivalent to spacing with "conventional 2 line html" </p>

</div>

JavaScript

Vue.component('vsf-controls', {
    template: '\
      <div>\
      	<template v-for="(val, key, index) in value">\
        	<button >{{key}}</button> \
        </template>\
      </div>\
    ',
    props: {
      'value': {type: Object},  // buttons to render/update
    }
});

new Vue({
  el: '#app',
})