Vue模板不更新

我在VueJS中構建了我的第一個項目，並且無法使用v-if顯示/隱藏模板。我有一個數據模型布爾變量（groups.categories.descEditable），我正在切換顯示/隱藏模板。出於某種原因，當我更改該值時，模板不會自動更新。Vue模板不更新

<tbody v-for="group in groups"> 
    ... 
    <tr v-for="cat in group.categories"> 
     ... 
     <td class="td-indent"> 
      <input v-if="cat.descEditable" :value="cat.description" type="text" class="form-control"> 

      <div v-else v-on:click="editDesc(cat.id)">{{ cat.description }}</div> 


      <div>{{cat.descEditable}}</div> 
     </td> 
     ... 
    </tr> 
</tbody> 


methods: { 
    editDesc (cat_id) { 

     let vm = this 

     this.groups.forEach(function(group, gr_ind){ 
      group.categories.forEach(function(cat, ind) { 

       if (cat_id == cat.id) 
        cat.descEditable = true 
       else 
        cat.descEditable = false 
      }) 
     }) 
    } 
},

所以我想在文字輸入顯示，如果descEditable是真實的（一旦點擊含有描述DIV），否則顯示與靜態描述值股利。 descEditable屬性似乎正確更新，但輸入元素上的v-if沒有對它作出反應。我必須誤解vuejs的一些基本內容，只是無法弄清楚它是什麼。

來源

2017-06-20 user3246127

我發現模板狀態實際上在內部更新，但它不是渲染上的某些原因。我通過調用vm。$ forceUpdate（）找到了一個解決方案，但是這看起來並不是真正的「正確」答案。如果有人有更好的方法，請分享。 – user3246127

我認爲你可以完全拋棄editDesc方法。

console.clear() 
 

 
const groups = [ 
 
    { 
 
    categories:[ 
 
     { 
 
     descEditable: false, 
 
     description: "click me" 
 
     
 
     } 
 
    ] 
 
    } 
 
] 
 

 

 
new Vue({ 
 
    el:"#app", 
 
    data:{ 
 
    groups 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
<div id="app"> 
 
    <table> 
 
    <tbody v-for="group in groups"> 
 
     <tr v-for="cat in group.categories"> 
 
     <td class="td-indent"> 
 
      <div v-if="cat.descEditable"> 
 
      <input v-model="cat.description" type="text" class="form-control"> 
 
      <button @click="cat.descEditable = false">Save</button> 
 
     </div> 
 
     <div v-else @click="cat.descEditable = true">{{ cat.description }}</div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-06-20 21:00:56 Bert

優雅點，但它仍然無法正常工作。我發現模板狀態實際上是內部更新的，但是由於某種原因它沒有渲染。如果我更改組件文件然後保存，導致Vue開發服務器'刷新'dom，我可以獲取它。顯然這並不能解決我的問題。有沒有辦法強制刷新Vue的DOM或其他「正確」的方式來確保更改得到呈現？ – user3246127

@ user3246127這是行不通的。有幾個問題。我捏造了一些數據並將其轉換爲一個工作示例。將來，請提供一些可用於展示問題的數據或工作示例。使事情變得更容易。 – Bert

奇怪的是，我無法讓它爲我工作（如果重要的話，我在組件中使用它）。我可以通過調用這個函數來獲得我的工作。$ forceUpdate（），但是我更喜歡你的解決方案，只要我能讓它工作。謝謝您的幫助。 – user3246127

Vue模板不更新

回答

相關問題