SHARE
TWEET

Untitled

a guest Oct 10th, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script lang='js'>
  2.     import {createElement, ref} from '@vue/composition-api';
  3.  
  4.     export default {
  5.         name: 'App',
  6.         setup() {
  7.  
  8.             const tabs = ['Home', 'Posts', 'Archive'];
  9.  
  10.             const currentTab = ref('Home');
  11.  
  12.             return () => {
  13.  
  14.                 const buttons = tabs.map((tab) => {
  15.                     return createElement('button', {
  16.                         key: tab,
  17.                         class: ['tab-button', {active: currentTab.value === tab}],
  18.                         on: {
  19.                             click: () => currentTab.value = tab
  20.                         }
  21.                     }, tab)
  22.                 });
  23.  
  24.                 const component = () => {
  25.                     if (currentTab.value === 'Home') {
  26.                         return createElement(InputComponent, {
  27.                             props: {
  28.                                 label: "Home"
  29.                             }
  30.                         })
  31.                     }
  32.                     if (currentTab.value === 'Posts') {
  33.                         return createElement(InputComponent, {
  34.                             props: {
  35.                                 label: "Posts"
  36.                             }
  37.                         })
  38.                     }
  39.                     if (currentTab.value === 'Archive') {
  40.                         return createElement(InputComponent, {
  41.                             props: {
  42.                                 label: "Archive"
  43.                             }
  44.                         })
  45.                     }
  46.                 };
  47.  
  48.                 return createElement('div', null, [
  49.                     ...buttons,
  50.                     component()
  51.                 ])
  52.             }
  53.         }
  54.     }
  55.  
  56.     const InputComponent = {
  57.         name: 'InputComponent',
  58.  
  59.         props: {
  60.             label: {
  61.                 type: String,
  62.                 required: true
  63.             }
  64.         },
  65.  
  66.         setup(props) {
  67.  
  68.             const state = ref("");
  69.  
  70.             return () => {
  71.  
  72.                 console.log(props.label)
  73.  
  74.                 return createElement("div", [
  75.  
  76.                     createElement("label", null, props.label),
  77.  
  78.                     createElement("input", {
  79.                         domProps: {
  80.                             value: state.value
  81.                         },
  82.                         on: {
  83.                             input: function (event) {
  84.                                 state.value = event.target.value
  85.                             }
  86.                         }
  87.                     })
  88.                 ])
  89.             }
  90.         }
  91.     };
  92.  
  93. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top