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

我正在使用一个名为Element UI的前端库在我的网站上创建一些手风琴。我有一系列我喜欢为之创作手风琴的对象。仅供参考，来自element ui网站：手风琴上使用的v型指定当前活动面板。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>

现在我想我应该循环遍历数组，为数组中的项目创建accordions，并将name属性绑定到index+1，这样第一个项目的name属性将等于1，第二个项目的name属性将等于2，以此类推：

---

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

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

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

但是，activeName是一个字符串。因此，这些值不匹配，这就是为什么accordian不能在页面加载时打开

下面是一个更新的沙盒：

---

我把activeName改成了一个数字。for循环accordian现在将打开，而普通HTML accordian将不会打开。

这很有意义。。。我认为这不会是一个问题，因为name属性需要一个字符串或数字。但当然，它只能是两个中的一个，不能是字符串和数字。非常感谢你的回答！

<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>

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