Question

我正在使用称为Element UI的前端库在我的网站上创建一些手风琴。我得到了一系列我喜欢为其创建手风琴的对象。仅供参考，来自元素ui网站：手风琴上使用的v-model指定了currently active panel。 name属性是面板的唯一标识。这意味着我可以做到：

<el-collapse v-model="activeName" accordion>
  <el-collapse-item title="Consistency" name="1">
    <div>content content content</div>
  </el-collapse-item>
  <el-collapse-item title="Consistency" name="2">
    <div>more content more content more content</div>
  </el-collapse-item>
</el-collapse>

一个这样加载的文件，第一个手风琴将打开，因为在数据对象中，activeName设置为1：

data() {
    return {
      activeName: '1',
    }
}

现在，我想我将遍历数组并为数组中的项目创建手风琴，并将name属性绑定到index + 1，以便第一个项目具有{ {1}}属性等于name，第二属性等于1，依此类推。

但是由于某种原因，当页面加载时，手风琴中的第一项不会自动打开。它们默认都是关闭的。我创建了一个codeandbox，其中包含您可以在此处亲自看到的问题：codesandbox

Answer 1

问题在于，当您运行一个for循环并分配name时，它是一个数字而不是字符串。

:name="index+1"    <---- This is a number

但是activeName是一个字符串。因此，值不匹配，这就是为什么手风琴无法在页面加载时打开的原因。

这是更新的沙箱：https://codesandbox.io/s/vue-template-ysm79

我将activeName更改为数字。现在，for循环手风琴将打开，而普通的HTML手风琴将不会打开。

手风琴有一个默认的活动面板，但不会打开

1 个答案: