Vue.js中声明单个项：适配grid-item的layout从数组转对象

To switch from an array-based layout to an object-based one in Vue.js, you just need to adjust your v-for loop to iterate over the object’s values (and use the object keys as unique identifiers for each component). Here’s how to modify your code:

Modified Template Code #

<grid-item 
  v-for="(item, key) in layout" 
  :key="key" 
  :x="item.x" 
  :y="item.y" 
  :w="item.w" 
  :h="item.h" 
  :i="item.i"
> 
  {{ item.i }} 
</grid-item>

Key Changes Explained: #

• v-for="(item, key) in layout": This syntax lets you access both the value (item) of each object property (which holds your grid position data) and the property name (key, like pnlProject or pnlRight).
• :key="key": Using the unique object key as the :key prop ensures Vue can efficiently track each component’s state and re-render correctly when the layout changes.

Notes on Reactivity: #

If you plan to dynamically add/remove properties from your layout object later, keep in mind Vue’s reactivity system doesn’t automatically detect property additions or deletions for objects. To handle this:

• Use Vue.set(this.layout, 'newPanelKey', { x: 2, y: 0, w: 1, h: 1, i: '2' }) to add new panels
• Use object spread syntax to create a new object when removing properties: this.layout = { ...this.layout, [panelKeyToRemove]: undefined } (then delete the property if needed, or replace the entire object)

That’s all you need to make your grid items work seamlessly with the object-based layout structure!

内容的提问来源于stack exchange，提问作者Anonymous Creator