我在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是否为true(一旦单击包含描述的div),否则显示带有静态描述值的div。 descEditable属性似乎正在正确更新,但输入元素上的v-if并未对其做出反应。我一定是误解了vuejs的基本内容,只是无法弄清楚它是什么。
答案 0 :(得分:2)
我认为你可以完全放弃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>