使用 vue.js 在 v-for 中切换表单

Question

如何在 v-for 循环中切换表单，我在 v-for 中有一个表单，我想在点击时显示（切换）。 但是当我点击 v-for 中的所有表单时，会被切换。

其次，当循环内有大量数据或将其作为单独的组件加载时，将表单保持在循环内是更好的方法。

这就是我想要做的。

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript"
      },
      {
        text: "Learn Vue"
      },
      {
        text: "Play around in JSFiddle"
      },
      {
        text: "Build something awesome"
      }
    ],
    show: ''
  },
  methods: {
    toggle: function(todo) {
      this.show = !this.show
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,key) in todos">
      <p>
        {{ key+1 }} - {{ todo.text}} <span @click="toggle(todo)"><b>Contact</b></span>
        <div v-if="show">
          <hr />
          <p>
            <label>Message</label>
            <input type="text">
          </p>
          <hr />
        </div>
      </p>
    </li>
  </ol>
</div>

Answer 1

只有 1 个反应变量 show。当所有表单都使用v-if="show" 时将其设置为 true，将显示所有内容。

您可以将show 设置为每个表单独有的内容。例如它的文本，并使用它的文本执行v-if。

演示：https://jsfiddle.net/jacobgoh101/umaszo9c/

将v-if="show" 更改为v-if="show === todo.text"

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,key) in todos">
      <p>
        {{ key+1 }} - {{ todo.text}} <span @click="toggle(todo)"><b>Contact</b></span>
        <div v-if="show === todo.text">
          <hr />
          <p>
            <label>Message</label>
            <input type="text">
          </p>
          <hr />
        </div>
      </p>
    </li>
  </ol>
</div>

改变toggle方法

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript"
      },
      {
        text: "Learn Vue"
      },
      {
        text: "Play around in JSFiddle"
      },
      {
        text: "Build something awesome"
      }
    ],
    show: ''
  },
  methods: {
    toggle: function(todo) {
      if (this.show === todo.text)
        this.show = false
      else
        this.show = todo.text
    }
  }
})

Answer 2

属性“show”应该是待办事项的道具，而不是数据的道具

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript"
      },
      {
        text: "Learn Vue"
      },
      {
        text: "Play around in JSFiddle"
      },
      {
        text: "Build something awesome"
      }
    ].map(o=>({...o,show:false}))
  },
  methods: {
    toggle: function(todo) {
      todo.show = !todo.show
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,key) in todos">
      <p>
        {{ key+1 }} - {{ todo.text}} <span @click="toggle(todo)"><b>Contact</b></span>
        <div v-if="todo.show">
          <hr />
          <p>
            <label>Message</label>
            <input type="text">
          </p>
          <hr />
        </div>
      </p>
    </li>
  </ol>
</div>