From 736aa16c4601a96cd7289bafc14efbb387020cb0 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 23 Feb 2021 19:10:28 +0000
Subject: [PATCH] fixes for the list and table examples

---
 .../vue/button-story-click-handler-args.vue3.js.mdx      | 4 ++--
 docs/snippets/vue/list-story-template.vue2.js.mdx        | 4 ++--
 docs/snippets/vue/list-story-template.vue3.js.mdx        | 8 ++++----
 .../vue/table-story-fully-customize-controls.vue2.js.mdx | 9 +++++----
 .../vue/table-story-fully-customize-controls.vue3.js.mdx | 6 ++++--
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/docs/snippets/vue/button-story-click-handler-args.vue3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.vue3.js.mdx
index de735059e89..400f366f225 100644
--- a/docs/snippets/vue/button-story-click-handler-args.vue3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.vue3.js.mdx
@@ -6,12 +6,12 @@ export const Text = (args) => ({
   setup() {
     return {
       label: args.label,
+      onClick: action('clicked'),
     };
   },
   template: '<Button @onClick="onClick" :label="label" />',
 });
 Text.args = {
   label: 'Hello',
-  onClick: action('clicked'),
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.vue2.js.mdx b/docs/snippets/vue/list-story-template.vue2.js.mdx
index 136a14a3bd7..1d1ef284a93 100644
--- a/docs/snippets/vue/list-story-template.vue2.js.mdx
+++ b/docs/snippets/vue/list-story-template.vue2.js.mdx
@@ -12,8 +12,8 @@ const ListTemplate = (args, { argTypes }) => ({
   components: { List, ListItem },
   template: `
     <List v-bind="$props">
-        <div v-for="item in items" :key="item.someString">
-            <ListItem v-bind="$props"/>
+        <div v-for="item in items" :key="item.title">
+            <ListItem :item="item" />
         </div>
     </List>
     `,
diff --git a/docs/snippets/vue/list-story-template.vue3.js.mdx b/docs/snippets/vue/list-story-template.vue3.js.mdx
index 5786aff0fa8..079d46eb721 100644
--- a/docs/snippets/vue/list-story-template.vue3.js.mdx
+++ b/docs/snippets/vue/list-story-template.vue3.js.mdx
@@ -14,15 +14,15 @@ const ListTemplate = (args) => ({
   },
   template: `
     <List v-bind="args">
-        <div v-for="item in items" :key="item.someString">
-            <ListItem v-bind="args"/>
-        </div>
+      <div v-for="item in items" :key="item.title">
+        <ListItem :item="item"/>
+      </div>
     </List>
     `,
 });
 
 export const Empty = ListTemplate.bind({});
-EmptyListTemplate.args = {
+Empty.args = {
   items: [],
 };
 
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.vue2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.vue2.js.mdx
index 50f0534eed4..09b5a2f10ff 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.vue2.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.vue2.js.mdx
@@ -5,12 +5,13 @@ const TableStory = (args, { argTypes }) => ({
   components: { Table },
   props: Object.keys(argTypes),
   template: `
-    <tr v-for="(row, idx1) in data">
+    <Table v-bind="$props">
+      <tr v-for="(row, idx1) in data">
         <td v-for="(col, idx2) in row">
-            {{ data[idx1][idx2] }}
+          {{ data[idx1][idx2] }}
         </td>
-    </tr>
-  `,
+      </tr>
+    </Table>`,
 });
 
 export const Numeric = TableStory.bind({});
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.vue3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.vue3.js.mdx
index fa761b8ba7d..5a7bcfa834b 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.vue3.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.vue3.js.mdx
@@ -7,11 +7,13 @@ const TableStory = (args) => ({
     return { args };
   },
   template: `
-    <tr v-for="(row, idx1) in data">
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
         <td v-for="(col, idx2) in row">
             {{ data[idx1][idx2] }}
         </td>
-    </tr>
+      </tr>
+    </Table>
   `,
 });