Vue模板不更新

Question

我在VueJS中构建了我的第一个项目，并且无法使用v-if显示/隐藏模板。我有一个数据模型布尔变量（groups.categories.descEditable），我正在切换显示/隐藏模板。出于某种原因，当我更改该值时，模板不会自动更新。

<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的一些基本内容，只是无法弄清楚它是什么。

Answer 1

我认为你可以完全抛弃editDesc方法。

console.clear() 
 

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

 

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

<script src="https://unpkg.com/vue@2.2.6/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>