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 后），否则显示具有静态描述值的 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>