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

最新推荐文章于 2024-10-13 16:47:32 发布

原创最新推荐文章于 2024-10-13 16:47:32 发布 · 795 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

VUE 专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中使用v-model和v-show指令实现在同一个模态框中，动态切换表单的编辑和查看模式。内容包括通过在json数据中添加'foo'字段来标记编辑状态，以及在每个编辑按钮上添加事件来触发保存。示例代码展示了如何渲染和操作数据，以实现单个表单的编辑和保存功能。

结果图

循环出来的表单可以在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数据内，之后后台实体类获取也不影响。