Question

我正在遍历对象内的数组。当我更新数组中的对象时，数据会更新，但是UI不会

数据看起来像这样

projectConfig = {
   files: [
      lang: "ar-eg",
      paths: ["/Users/omarabdelhady/Desktop/Others/test/i18n/ar-eg.json"]
   ]
}

HTML

 <div class="col-12 files-box">
    <div v-for="(file, index) in projectConfig.files" :key="file.lang">
        <bdi>Lang : {{file.lang}}</bdi>
         <div>
           Files :
             <ul class="col-12 app-list">
                <li v-for="(path, i) in file.paths" :key="path">
                   {{getFileNameFromPath(path)}}
                      <i class="i-bin"
                         @click="deleteLang(i, index)">
                      </i>
                </li>
             </ul>
          </div>
       </div>
   </div>

删除方法

  deleteLang(pathIndex, fileIndex) {
    this.projectConfig.files[fileIndex].paths.splice(pathIndex, 1);
     if(this.projectConfig.files[fileIndex].paths.length === 0) {
       this.projectConfig.files.splice(fileIndex, 1);
     }
   }

我对v-for使用：key来检测更改，但是没有用我尝试了此方法。$ forceUpdate（）有效，但是我认为这不是最佳解决方案

-更新实际上数据看起来像这样

projectConfig = {
   files: [{
      lang: "ar-eg",
      paths: ["/Users/omarabdelhady/Desktop/Others/test/i18n/ar-eg.json"]
   }]
}

加上我正在使用打字稿

Answer 1

我猜测，问题在于未在组件初始化时设置反应性。要么数据最初不可用，要么嵌套的对象和数组太多。

看着这个嵌套对象...
projectConfig.files[i].paths[j]

这是对象中的数组中的对象中的数组中的字符串。

如果在启动组件时数组为空，则不添加反应性。您可以尝试使用slice和$set来触发反应。

为什么对对象内的对象数组进行v-for，即使使用：key也不会更新？

1 个答案: