0

I'm implementing vue-kanban component in my web application. There I'd like to display some objects from my database but I need some help to add them to the kanban board.

This is my array with the projects:

props: {
  projects: {
    type: Array,
    required: true,
  }
},

And here I'd like to add them to the kanban board, it should be instead of blocks:

data() {
  return {
    stages: ['open', 'doing', 'close'],
    blocks: [
      {
        id: 1,
        status: 'open',
        title: 'test',
      },
    ],
  };
}

I use that component: https://github.com/BrockReece/vue-kanban

carl
  • 17
  • 4
  • Welcome to SO! Please add template code which you've tried. – Varit J Patel Mar 25 '19 at 11:18
  • In `mounted` try setting `this.blocks` to `this.projects || []` ? `this.blocks = this.projects || []` or See this answer for initialising the data property to props. https://stackoverflow.com/questions/40408096/whats-the-correct-way-to-pass-props-as-initial-data-in-vue-js-2 – Francis Leigh Mar 25 '19 at 11:25
  • @FrancisLeigh how exactly should the code look like? – carl Mar 25 '19 at 11:55

1 Answers1

0

See What's the correct way to pass props as initial data in Vue.js 2?

If the Kanban component is expecting an attribute like :blocks="[...]" and nothing is going to happen to the data can you not pass the projects array directly to it? e.g :blocks="projects"

If no and the data name blocks is a must and the data needs to be mutable then see below.

export default {
  name: "YourComponent",
  props: {
    projects: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      blocks: this.projects
    }
  }
}
Francis Leigh
  • 1,870
  • 10
  • 25