子元素的点击事件 修改父元素的样式

Question

点击子元素 修改 父亲元素的样式
代码 如下

 <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？？？？？？？？？？

Answer 1

https://github.com/creatshare...

Answer 2

http://cn.vuejs.org/guide/cla...

用对象语法，每个item加个状态控制。

希望能帮到你。

Answer 3

将每一个子元素看成一个整体，每个子元素的样式都由自身状态控制就可以了，我感觉你描述的需求和修改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>