Accordion 有一个默认的活动面板，但它不会打开

Question

我正在使用一个名为 Element UI 的前端库在我的网站上创建一些手风琴。我得到了一组我喜欢为其创建手风琴的对象。仅供参考，来自 element 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，这样第一个项目的name 属性就等于到1，第二个到2等等。所以：

<el-collapse v-model="activeName" accordion>
            <el-collapse-item
              v-for="(item, index) in experience"
              :title="item.company"
              :name="index + 1"
              :key="index"
            >
              <div> content content content </div>
            </el-collapse-item>
</el-collapse>

但由于某种原因，当页面加载时，折叠式中的第一项不会自动打开。它们都默认关闭。我创建了一个带有问题的代码框，您可以在这里看到：codesandbox

Answer 1

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

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

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

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

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