我正在用 VueJS 构建我的第一个项目,但我无法使用 v-if 获取模板来显示/隐藏。我有一个数据模型 bool 变量 (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 没有对其使用react。我一定是误解了 vuejs 的一些基本知识,只是无法弄清楚它是什么。
最佳答案
我认为您可以完全放弃 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>
关于javascript - Vue 模板不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44662803/