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

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，这样第一个项目就会有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，你可以在这里看到你自己的问题：codesandbox

Answer 1

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

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

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

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

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

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

Accordion has a default active panel, but it won't open

vue.js

vuejs2

element-ui