html - 在 vue 2 (V-Model) 中操作元素的数据

Question

我的组件模板上有多个元素，并且它的数据是从另一个 JS 文件导入的。我需要一个按钮，单击该按钮将更改 h1 标题的内容。我不完全理解 v-model 的工作原理，比如如何将它绑定到 for 循环中。请看一下我的示例代码。

<button @click.prevent="changeData">Click Me!</button>
<div v-for="heading in headings" :key="heading.id">
  <h1>{{ heading.title }}<h1>
</div>

import { dataA, dataB } from '../data.js';
headings = dataA

export default {
        data: function () {
            return {
               headings
            }
           methods: {
               changeData(){
                  headings = dataB
                  } 
}
        },