Actions is not displayed on action addons. Help me find where wrong 🙏

[lala-lee-jobs]

I use this sample code to write my stories.
https://www.learnstorybook.com/intro-to-storybook/vue/en/simple-component/
Everything is fine but I found one error in my code that actions is not displayed on action addons.

Help me find where wrong 🙏

I think my template code maybe the point.

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { Task },
    template: `
        <task :task="$props" 
          @archiveTask="onArchiveTask"
          @pinTask="onPinTask" />
    `,
    methods: actionsData
});

// Default Task State
export const Default = Template.bind({});
Default.args = taskData;

The full project. https://github.com/lala-lee-jobs/vue-taskbox
And the task.stories.js is here.
https://github.com/lala-lee-jobs/vue-taskbox/blob/master/src/components/Task.stories.js

Thanks.

[jonniebigodes]

@lala-lee-jobs thank you for bringing this to our attention, the vue version of the tutorial is still not working properly with 6.0 as of now. I'm creating an issue so that we could get some help with the updates for the different frameworks available so that the documentation can provide the most accurate code base.

I've tested on my dummy project and you can do the following to properly use the events:

In the Task.vue component:

<template>
  <div :class="taskClass">
    <label class="checkbox">
      <input
        type="checkbox"
        :checked="isChecked"
        :disabled="true"
        name="checked"
      />
      <span class="checkbox-custom" @click="onArchiveTask" />
    </label>
    <div class="title">
      <input
        type="text"
        :readonly="true"
        :value="this.task.title"
        placeholder="Input title"
      />
    </div>
    <div class="actions">
      <a v-if="!isChecked">
        <span class="icon-star" @click="onPinTask" />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "task",
  props: {
    task: {
      type: Object,
      required: true,
      default: () => ({
        id: "",
        state: "",
        title: "",
      }),
    },
  },
  computed: {
    taskClass() {
      return `list-item ${this.task.state}`;
    },
    isChecked() {
      return this.task.state === "TASK_ARCHIVED";
    },
  },
  methods: {
    onArchiveTask() {
      console.log(`reached archive`);
      this.$emit("onArchiveTask",this.$props.task.id);
    },
    onPinTask() {
      console.log(`reached pinTask`);
      this.$emit("onPinTask",this.$props.task.id);
    },
  },
};
</script>

In your task.stories.js:

import Task from "./Task.vue";

export default {
  component: Task,
  title: "Task"
};

const taskTemplate = `<task :task="task" @onPinTask="onPinTask" @onArchiveTask="onArchiveTask" v-bind="$props" />`;

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Task },
  template: taskTemplate
});

export const Default = Template.bind({});
Default.args = {
  task: {
    id: "1",
    title: "Test Task",
    state: "TASK_INBOX",
    updatedAt: new Date(2018, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: "TASK_PINNED"
  },
};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED'
  },
};

If you run Storybook with yarn storybook and you check the Task item and you click any of them you'll something like:

Might be completely wrong on this and feel free to correct me if i'm wrong, but it might be related to the way Storybook captures the events. If you check your .storybook/preview.js, you'll see the following:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

What this code is doing is configuring the actions addon to work with any action (event) based on that regex, basically anything starting with on will be captured and logged. You can read more about how actions are handled here

Hope my answer gave any insights and helped with your issue.

Stay safe

[lala-lee-jobs]

I found out the issue in my code.

In the Task.vue component. Because eslint tips, so I change the code use kebab-case

My task.stories.js should change as follow

It works!!!

But your dummy project code is very helpful.

I have made a small change for my code.

// src/components/Task.stories.js
import { action } from "@storybook/addon-actions";
import Task from "./Task";

export default {
  title: "Task",
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  argTypes: {
    state: {
        control: {
          type: 'inline-radio',
          options: ['Task_INBOX', 'TASK_PINNED', 'TASK_ARCHIVED'],
        },
    },
    updated_at: { control: 'date'}
  },
};

export const actionsData = {
  onPinTask: action("onPinTask"),
  onArchiveTask: action("onArchiveTask")
};

export const taskData = {
    id: "1",
    title: "Test Task",
    state: "Task_INBOX",
    updated_at: new Date(2019, 0, 1, 9, 0)
};

const taskTemplate = `
  <task :task="task" 
    @pin-task="onPinTask" 
    @archive-task="onArchiveTask" 
    v-bind="$props" />
`;

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Task },
  template: taskTemplate,
  methods: actionsData
});

// Default Task State
export const Default = Template.bind({});
Default.args = {
  task: taskData
};

// Pinned Task State
export const Pinned = Template.bind({});
Pinned.args = {
    task: {
      ...taskData,
      state: "TASK_PINNED"
    },
};

// Archived Task State
export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...taskData,
    state: 'TASK_ARCHIVED'
  },
};

I am very thankful that you reply me quickly.