vue.js - 当我更改值时，使用 Scales Chords API 的 Vue 组件不会更新

Question

所以我正在尝试使用 Scales chords API 在我的网页上显示一系列和弦。这是 API 的链接：https ://www.scales-chords.com/api/ 我正在为我的网页使用一个 Vue 组件和一个 b-list-group 来运行我的数组并显示数据。它在第一次加载时完美运行，但是，当我将数组更改为其他内容时，Scales Chords API 元素就会消失。我已经确认该数组正在更改为应有的状态，但似乎 vue 在重新渲染具有不同值的这些元素时遇到了麻烦。这是我的 b-list-group 元素的代码：

    <b-list-group-item :style="myStyle"
      v-for="(c, i) in chords"
      :key="i">
      <ins class="scales_chords_api" :chord="c" instrument="piano"></ins>
        <ins  class="scales_chords_api" :chord="c" instrument="piano" output="sound"></ins> 
         <br>
        <input type="checkbox" id="chordCheck" name="chordCheck" value="chordCheck">
        <label for="chordCheck"> {{c}}</label><br>
    </b-list-group-item>
  </b-list-group>

重新呈现这些数据的最佳方式是什么？我尝试过使用 this.$forceUpdate() 以及向 vue 组件添加一个键并在每次更新数组时递增该键。我真的不知道还能尝试什么，但如果有另一种纯粹重新加载组件的方法，我愿意尝试。当我更改数组时，复选框上的标签也会正确更新，这毫无价值。

标签： vue.js