Question

如何在v-for循环中切换表单，我在v中有一个表单，我希望在单击时显示（切换）。但是，当我点击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

只有一个反应变量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”应该是todo的支柱，而不是数据支柱

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>

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

2 个答案: