vue利用for循环切换表单编辑和展示的功能

结果图

 

循环出来的表单可以在edit和view间切换，如果需要单个表单保存就在每个sure按钮加事件~

 

html：

<Modal v-model="test111" title="This is test box">
  <div v-for="(item, i) in json111" :key="i">
    
    <div v-show="!item.foo" style="margin-top: 15px;border: 1px solid #000;padding: 5px;">
      <div>id: {{item.id}}</div>
      <div>name: {{item.name}}</div>
      <div>body: {{item.body}}</div>
      <button @click="item.foo = true">edit</button>
    </div>

    <div v-show="item.foo" style="margin-top: 15px;border: 1px solid #000;padding: 5px;">
      <div>
        <label>id</label>
        <input type="number" v-model="item.id">
      </div>
      <div>
        <label>name</label>
        <input type="text" v-model="item.name">
      </div>
      <div>
        <label>body</label>
        <input type="text" v-model="item.body">
      </div>
      <button @click="item.foo = false">sure</button>
    </div>
  </div>
</Modal>

js:

test111: false,
json111: [
  {
    id: 1,
    name: "qwe1",
    body: "vzixcocjqwioe",
    foo: false,
  },
  {
    id: 2,
    name: "jcvioq",
    body: "xpvo23094u",
    foo: false,
  },
  {
    id: 3,
    name: "qwe1",
    body: "pvoj23j`io12123",
    foo: false,
  },
]

需要注意正常从后台拉取的json数据不应该包含foo字段，这里需要在获取数据后进行循环添加foo标记用来区分是编辑还是展示。

也可以单独把foo定义成一个数组，但每次获取更麻烦点，所以还是建议循环添加到json数据内，之后后台实体类获取也不影响。