用Vue在v-for內部進行條件渲染

問題

我的第一次嘗試看起來像這樣：

如果我 console.log 我的 this.projects，我可以看到每個專案的值都在正確變化。然而，即使project.showTags == true，v-if也不會呈現。

然后我讀到，你不應該在v-if內使用v-for，所以我嘗試使用Bootstrap-Vue collapse組件：

<b-list-group v-if=" ！ isLoading">/span>
    <b-list-group-item v-for="project in projects" ：key="project。 path"> 
      {{project.name }}} 
      < b-btn variant="danger"/span> size="sm" class="list-button" @click="deleteProject(project. path)">L?schen</b-btn>/span>
      < b-btn variant="secondary"/span> size="sm" class="list-button" @click="openProject(project. path)">?ffnen</b-btn> 
      < b-btn variant="secondary"/span> size="sm" class="list-button" @click="project. showTags = !project.showTags">Tags</b-btn> 
      <b-collapse v-model="project.showTags">/span>
        <搜索-標簽 style="margin-top: 1em;"></搜索標簽>
      </b-collapse>/span>
    </b-list-group-item>/span>

但這也是行不通的。

我認為這不可能如此困難，我在這里錯過了什么。希望得到任何幫助。

編輯1

從我的代碼中可以看出，整個串列被放在<b-list-group>中，它是根據isLoading有條件地呈現的。如果我通過翻轉isLoading，然后翻轉project.showTags，然后再翻轉isLoading來強制重新加載，它就能作業。但我覺得這個解決方案是超級陰暗和黑客的。

可以作業，但代碼很丑：

< b-list-group-item v-for="project in projects"/span> 。 key="project. path"> 
      {{project.name }}} 
      < b-btn variant="danger"/span> size="sm" class="list-button" @click="deleteProject(project. path)">L?schen</b-btn>/span>
      < b-btn variant="secondary"/span> size="sm" class="list-button" @click="openProject(project. path)">?ffnen</b-btn> 
      < b-btn variant="secondary"/span> size="sm" class="list-button" @click="test（project）"> Tags</b-btn>
      <search-tags v-show="project. showTags" style="margin-top: 1em;"></search-tags> 
    </b-list-group-item> 
  </b-list-group>/span>

與：

test(project) {
  this.isLoading = !this.isLoading;
  project.showTags = !project.showTags;
  console.log(this.projects)。
  this.isLoading = !this.isLoading;
},

編輯2

我的資料首先是這樣定義的：

data()/span> {
return {
  projects: [],
  tags: [],
  newProject: false。
  isLoading: true。
  isError: false。
  form: {
    name: ''/span>,
  },
};>

},

然后在created()上，我呼叫getAllProjects()來獲取我的專案形式后臺：

created（） {
this.getAllProjects（）。
},

我的專案沒有showTags道具，所以我在獲取后直接分配了它：

async getAllProjects（） {
  try {
    this.isLoading = true;
    const res = await fetch(store. state.urlEndpoints.getProjects, {
      ...AuthPost(), // request config object。
    });

    this.projects = JSON. parse(await res.text())。
    this.projects。 forEach((project) => { project.showTags =false; });
    console.log(this.projects) 。
    this.isLoading = false;
  } catch (err) {
    this.isError = true;
    this.isLoading = false;
  }
},

在每次點擊 "Tags "按鈕時，我都會在控制臺記錄this.projects，正如上面的test()函式所見。這些值就像我希望的那樣翻轉。

uj5u.com熱心網友回復：

@Rouben 你需要整理一下你想如何設定this.projects，因為現在在你的created中你假設你將從getAllProjects中得到固定的專案陣列。

嘗試這樣做：

async getAllProjects（） {
  try {
    this.isLoading = true;
    const res = await fetch(store. state.urlEndpoints.getProjects, {
      ...AuthPost(), // request config object。
    });

    return await res.json()。 map(project => {
         project.showTags = false;
         return 專案。
    });

另外，你也可以在@click里面嘗試這樣做：

< b-list-group-item v-for="（project, index）in projects" 。 key="專案。 path"> 
  {{project.name }}} 
  < b-btn variant="danger"/span> size="sm" class="list-button" @click="deleteProject(project. path)">L?schen</b-btn>/span>
  < b-btn variant="secondary"/span> size="sm" class="list-button" @click="openProject(project. path)">?ffnen</b-btn> 
  < b-btn variant="secondary"/span> size="sm" class="list-button" @click="flipShowTags（index, project)">。 Tags</b-btn>
  <search-tags v-show="project. showTags" style="margin-top: 1em;"></search-tags> 
</b-list-group-item> 

methods: {
  flipShowTags(index, obj) {
    this.$set(this.projects, index, {...obj, showTags: !obj.showTags})
  }
}

如果是因為它不是反應式的

uj5u.com熱心網友回復：

問題在這里...

this.projects = JSON。 parse(await res.text())。
this.projects。 forEach((project) => { project.showTags =false; })。

像這樣添加showTags屬性并不是反應式的，這就是為什么Vue不會像你所期望的那樣對變化做出反應。

參見更改檢測注意事項

Vue 無法檢測屬性的添加或洗掉。由于 Vue 在實體初始化程序中執行了 getter/setter 轉換程序，因此屬性必須存在于資料物件中，以便 Vue 對其進行轉換并使其具有反應性。

當您為您的projects資料屬性賦值時，您需要讓所有的反應式屬性存在。比如說

export default {
  data: () => （{
    projects: [],
    isLoading: true,
    //等。
  }),
  methods: {
    async loadAllProjects ( ) {
      try {
        this.isLoading = true;
        const res = await fetch(store. state.urlEndpoints.getProjects, {
          ...AuthPost(), // request config object。
        });

        if (!res.ok) {
          throw new Error(`${res.status}: ${await res.text()}`)
        }
    
        //注意，分配給`this.projects`的值現在有
        // `showTags`屬性在分配時。
        this.projects = (await res. json().map(project => ({...project.
          ...專案。
          showTags: falsecatch (err) {
        this.isError = true;
      }
      this.isLoading = false; }
    }
  },
  創建（） {
    this.loadAllProjects()
  }
}