点击子元素 修改 父亲元素的样式
代码 如下
<div class="{{ isActive ? 'active' : 'disabled' }}">
<p v-on:click="modifyParentClass"> subElement </p>
</div>
我想点击p元素 去修改div的class 将它改变为diabled
如果 只有一个的话 这好办:
export default {
data () {
return {
isActive: true
}
},
methods: {
modifyParentClass () {
this.isActive = false
}
}
}
but 这一段html 是遍历产生的 ,无法控制他的准确数量,所以就没有办法在data 里面定义这个isActive,所以 我现在通过jquery去 直接操纵dom 获取元素 然后增加 class 但是这样肯定不好,就违背了数据驱动。。。。
各位兄弟,你们有遇到过这种情况????
anyone help??????????
https://github.com/creatshare...
将每一个子元素看成一个整体,每个子元素的样式都由自身状态控制就可以了,我感觉你描述的需求和修改todolist每个item的状态很像,可以去看看Vue官方todolist的代码。
<li class="todo"
v-for="todo in filteredTodos"
:class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
</div>
</li>
http://cn.vuejs.org/guide/cla...
用对象语法,每个item加个状态控制。
希望能帮到你。