切换 Vue JS 中单个元素的类

Question

我有一个通过 jsonplaceholder 生成的待办事项列表，单击按钮会用虚拟内容填充 div。

我想要实现的是，当我单击单个 div（任务）时，它应该被删除/隐藏。

到目前为止，

<button id="btn" v-on:click= 'getTodo'>Show Todo</button>
    <div id="jsonData" v-for = 'todo in todos' >
        <ul v-bind:class = '{active: isActive}' v-on:click = 'removeTask'>
            <li>{{todo.title}} </li>
            <li id="status"> Task Status : {{todo.completed}} </li>
        </ul>
    </div>

JS

var vm =  new Vue({
el: '#app',
data() {
    return {
        todos: [],
        isActive: false
    }
},
methods: {
    getTodo: function() {
        axios.get('https://jsonplaceholder.typicode.com/todos')
        .then((response) => {
            this.todos = response.data;
        })
    },
    removeTask: function() {
        this.isActive = !this.isActive;
    }
}

})

“removeTask”事件处理程序切换所有生成的 div（任务）的类，而不是点击的 div。

如何在点击的 div 上添加/删除类？

Answer 1

使用axios API，我得到了待办事项，并务实地循环各个待办事项，并将isActive 属性应用于所有待办事项。 这些道具现在可以通过 toggleTodo 在将 todo' id 传递给方法时进行切换。 :-)

请注意，我在 ul 上应用了 v-if="todo.isActive"，如果您想应用一些样式（例如用于过渡等），也可以将其转换为 :class="{active: todo.isActive}"。

通过使用这种方法，您可以使用相同的逻辑来创建方法，例如 completeTodo 和 removeTodo 等

我添加了一个 showList 属性以显示/隐藏实际的完整列表。

我注意到您正在使用 v-bind 和 v-on - 这绝对有效，但 VUE ^2.0 可以处理 shorthand binding :-)

我还注意到您在 HTML 属性中使用了 single 引号...虽然这不会破坏您的标记，但我认为最好将它们保留为 double quotes。

var vm =  new Vue({
  el: '#app',
  data: {
    todos: [],
    showList: false
  },
  mounted () {
    this.getTodos()
  },
  methods: {
    getTodos () {
      axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(res => {
        res.data = res.data.map(todo => {
          todo.isActive = false
          return todo
        })

        this.todos = res.data
      })
    },
    showTodos () { this.showList = !this.showList },
    toggleTodo (id) {
      this.todos = this.todos.map(todo => {
        if (todo.id === id) {
          todo.isActive = !todo.isActive
        }
        return todo
      })
    }
  }
})

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>


<div id="app">
  <button @click="showTodos()">{{this.showList ? 'Hide' : 'Show'}} Todos</button>
  <div v-if="todos.length && showList" v-for="todo in todos">
    <button id="btn" @click="toggleTodo(todo.id)">Toggle Todo</button>

    <ul v-if="todo.isActive" :class="{active: todo.isActive}">
      <li>{{todo.title}} </li>
      <li id="status"> Task Status : {{todo.completed}} </li>
    </ul>
  </div>
</div>

<style lang="css">
  .active {
    border: 2px solid green;
  }
</style>

Answer 2

isActive 是整个实例的一个，而不是每个单独的待办事项。

您需要做的是通过映射响应数据或简单地使用响应数据的completed 属性来填充待办事项列表。

{
    "userId": 10,
    "id": 193,
    "title": "rerum debitis voluptatem qui eveniet tempora distinctio a",
    "completed": true
}

响应的每个待办事项都有 completed 属性，所以你可以使用它。

这就是你要做的事情：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      todos: []
    }
  },
  methods: {
    getTodo: function() {
      axios.get('https://jsonplaceholder.typicode.com/todos')
        .then((response) => {
          this.todos = response.data;
        })
    },
    toggleCompleted: function(todo) {
      todo.completed = !todo.completed;
    }
  }

})

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
<div id="app">
  <button id="btn" v-on:click='getTodo'>Show Todo</button>
  <div id="jsonData" v-for='todo in todos'>
    <ul v-bind:class='{active: todo.completed}' v-on:click='toggleCompleted(todo)'>
      <li>{{todo.title}} </li>
      <li id="status"> Task Status : {{todo.completed ? 'Completed' : 'Active'}} </li>
    </ul>
  </div>
</div>