Vue 2.0如何控制单个公用组件的状态

Question

需求： 在点击开关按钮的时候来显示或隐藏相对应下面的工具栏。 列表是通过数据渲染出来的。

代码

<li class="server-list">
  <h2 class="server-title ">
    <p class="name">小保养</p>
    <p class="proposal">建议5000公里/12个月保养一次</p>
    <span class="edit"></span>
    <span class="over-btn">完成</span>
  </h2>
  <ul class="product-list">
    <li class="product-item">
      <div class="product-box clearfix">
        <div class="img-box ">
          <img src="http://i1.piimg.com/4851/77e3331459df7728.png" alt="...">
        </div>
        <div class="product-info ">
          <p class="product-name">嘉实多极护5W-40 A3/B4钛流体全合 成机油润滑油SN/CF 4L</p>
          <p class="product-pirce">￥480</p>
          <div class="count-box">
            <span class="product-count">x1</span>
            <div class="count-tool clearfix">
              <div class="reduce fl">-</div>
              <div class="number fl">1</div>
              <div class="add fl">+</div>
            </div>
            <div class="product-change">更换</div>
            <div class="product-delete">删除</div>
          </div>
          <div class="sub-title">+增加1L机油(可根据需求增加)</div>
        </div>
      </div>
    </li>
    <li class="product-item"></li>
  </ul>
</li>

Answer 1

数据中为每一个列表增加一条代表状态的数据

和这个类似
我之前一个项目的应用

Answer 2

我的做法是每个列表项都渲染出一个操作栏，如果你要单个的话，可以考虑将列表index传到操作栏中，以确定操作的具体是哪一项