Question

我有以下网格项。这里的布局是

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

这里的布局如下：

layout = [
        { "x": 0, "y": 0, "w": 1, "h": 1, "i": "0" },
        { "x": 1, "y": 0, "w": 1, "h": 1, "i": "1" }
    ];

现在我想改变布局如下。

layout = {
        pnlProject:  { "x": 0, "y": 0, "w": 1, "h": 1, "i": "0" },
        pnlRight: { "x": 1, "y": 0, "w": 1, "h": 1, "i": "1" }
};

所以以前它是数组，现在我需要单独的网格项。那么我的组件在语法上会是什么样的呢？

我试过了。

<grid-item :x="layout.pnlProject.x" :y="layout.pnlProject.y" :w="layout.pnlProject.w" :h="layout.pnlProject.h" :i="layout.pnlProject.i">
    {{ layout.pnlProject.i }}
</grid-item>
<grid-item :x="layout.pnlRight.x" :y="layout.pnlRight.y" :w="layout.pnlRight.w" :h="layout.pnlRight.h" :i="layout.pnlRight.i">
    {{ layout.pnlRight.i }}
</grid-item>

但是在这里，layout.pnlProject＆amp; layout.pnlRight重复。所以有一种方法可以避免这种情况。并且能够以一种方式声明类似＆＃39; item＆＃39; 的循环变量，但没有循环？

Answer 1

如果你只有2个元素，可能：

<grid-item :x="layout.pnlProject.x" :y="layout.pnlProject.y" :w="layout.pnlProject.w" :h="layout.pnlProject.h" :i="layout.pnlProject.i">
    {{ layout.pnlProject.i }}
</grid-item>
<grid-item :x="layout.pnlRight.x" :y="layout.pnlRight.y" :w="layout.pnlRight.w" :h="layout.pnlRight.h" :i="layout.pnlRight.i">
    {{ layout.pnlRight.i }}
</grid-item>

如果你想保持grid-item不变（带循环），你可以从对象中获取值：

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

我能想到的另一个选择是创建另一个组件并将对象作为props传递。假设您正在使用单个文件组件：

<template>
  <grid-item :x="data.x" :y="data.y" :w="data.w" :h="data.h" :i="data.i">
    {{ data.i }}
  </grid-item>
</template>

<script>
export default {
  name: 'my-grid-item'
  props: ['data']
}
</script>

并称之为：

<my-grid-item :data="layout.pnlProject" />
<my-grid-item :data="layout.pnlRight" />

在vue

1 个答案: