Javascript 如何在单击后再次进行v-for更新？

我正在玩vue，试图学习它，但我很难让它在单击后通过阵列运行

数组首先是空的，但单击按钮时，将调用一个方法来用数据填充数组。我使用v-for来遍历数组，但看起来它只在调用方法之前遍历数组。活动结束后，我如何使其成为v-for绑定

该方法之所以有效，是因为它在控制台中显示新数组中的数据

  <button @click="updateList">Update List</button>
  <li v-if="clicked" v-for="item in newList">
    {{ item }}
  </li>

 <script>

 var vm = new Vue({
   el: '#app',
   data: {
     clicked: false,
     list: ["one","two","three"],
     newList: []
   },
   methods: {updateList: function (){
     for (i=0;i<this.newList.length;i++) {
     this.newList[i] = "you are" + this.list[i];
  }
  this.clicked = true;
    }
  }
  })

更新列表

{{item}}

var vm=新的Vue({
el:“#应用程序”，
数据：{
点击：错，
清单：[“一”、“二”、“三”]，
新列表：[]
},
方法：{updateList:function（）{
对于（i=0；i
v-if
和
v-for
应在单独的元素中。根据Vue官方文件：

不建议同时使用v-if和v-for。与v-if一起使用时，v-for的优先级高于v-if

更新列表


{{item}}



有关详细信息，请参阅

<button @click="updateList">Update List</button>

<ul v-if="clicked">
    <li v-for="item in newList">
        {{ item }}
    </li>
</ul>