Javascript Vue模板没有'；t更新

我正在用VueJS构建我的第一个项目，但是我在使用v-if显示/隐藏模板时遇到了问题。我有一个数据模型布尔变量（groups.categories.descediate），我正在切换该变量以显示/隐藏模板。由于某些原因，当我更改该值时，模板不会自动更新自身

<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
            })
        })
    }
},

...
...
{{cat.description}}
{{cat.descediate}}
...
方法：{
编辑描述（类别id）{
让vm=这个
this.groups.forEach（函数（group，gr_ind）{
group.categories.forEach（功能（cat，ind）{
if（cat_id==cat.id）
cat.descediate=true
其他的
cat.descediate=false
})
})
}
},

---

因此，我希望文本输入显示descEditable是否为true（单击包含描述的div后），否则使用静态描述值显示div。descEditable属性似乎正在正确更新，但输入元素上的v-if没有对其作出反应。我一定是误解了vuejs的一些基本功能，只是不知道它是什么。

我认为您可以完全放弃

editDesc

方法

console.clear（）
常量组=[
{
类别：[
{
可编辑：false，
描述：“单击我”
}
]
}
]
新Vue({
el:“应用程序”，
数据：{
组
}
})

拯救
{{cat.description}}

强调优雅，但它仍然不起作用。我发现模板状态实际上是在内部更新的，但由于某种原因，它没有在上呈现。如果更改组件文件并保存，则可以使其呈现，从而导致Vue dev服务器“刷新”dom。显然，这并不能解决我的问题。有没有办法强制刷新Vue的DOM或其他“正确”的方法来确保呈现更改？@user3246127这确实有效。有几个问题。我编造了一些数据并将其转换为一个工作示例。今后，请提供一些数据或工作示例来说明问题。使事情变得更容易。奇怪的是，我无法让它为我工作（如果这很重要的话，我正在组件中使用它）。我可以通过调用此.$forceUpdate（）使我的解决方案正常工作，但我更喜欢您的解决方案，如果我能让它正常工作的话。谢谢你的帮助。@user3246127如果你分享代码，我可以看一下。Github、pastebin等等。这将是一个很好的完整组件：我发现模板状态实际上是在内部更新的，但由于某种原因，它没有在上呈现。我通过调用vm.$forceUpdate（）找到了一个解决方案，但这似乎不是真正的“正确”答案。如果有人有更好的方法，请分享。