Adding an array to Vue-Kanban blocks can be accomplished by following these steps

Question

Adding an array to Vue-Kanban blocks can be accomplished by following these steps

I have a web application where I am integrating the vue-kanban component. My goal is to showcase certain objects from my database on the kanban board, but I could use some guidance on how to incorporate them into the display.

Below is the array containing the projects:

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

Instead of using blocks, I would like to populate the kanban board with these projects. Here's an example snippet of the code:

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

I am utilizing this component: https://github.com/BrockReece/vue-kanban

javascript arrays vue.js vue-component vuex

Answer 1

Answer №1

Check out this guide on passing props as initial data in Vue.js 2

When the Kanban component requires an attribute like :blocks="[...]", can you simply pass the projects array directly with :blocks="projects" if no changes will occur to the data?

If not, and the data name blocks is necessary and needs to be mutable, follow the example below.

export default {
  name: "YourComponent",
  props: {
    projects: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      blocks: this.projects
    }
  }
}

Answer 2

Check out this guide on passing props as initial data in Vue.js 2

When the Kanban component requires an attribute like :blocks="[...]", can you simply pass the projects array directly with :blocks="projects" if no changes will occur to the data?

If not, and the data name blocks is necessary and needs to be mutable, follow the example below.

export default {
  name: "YourComponent",
  props: {
    projects: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      blocks: this.projects
    }
  }
}

Adding an array to Vue-Kanban blocks can be accomplished by following these steps

Answer №1

Similar questions

Struggling to add information to a database table with PHP

Handling validation errors for arrays in jQuery

Node does not recognize the $or operator

Is it worth the effort to assign propTypes for mandatory properties repeatedly throughout nested components?

Tips for handling Google Spanner Date type in JavaScript

What is the reason for the failure of setting labels.text from an NSMutableArray?

Vue combined with Grapejs

"Angularjs feature where a select option is left blank as a placeholder, pointing users

Pluck() method in Laravel retrieves a single row instead of a collection

Canvas.js graph failing to refresh with updated data

Tips for refreshing a live ajax call to animate a circle

Adding a class to an img tag with TinyMCE

Tips for creating brief animations

Change the background of the play/stop icon with a jquery toggle

Change a Python string in the format 'min:sec' into a time object so it can be displayed correctly and sorted by the jQuery tablesorter

Synchronizing information between different controllers using a service

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Utilizing default values with props in Vue.js for customization

Guide on inputting Vue component in props

Exploring Virtual Reality with the Oculus Quest2 and Three.js