切换 Vue JS 中单个元素的类

Question

我有一个待办事项列表，它是通过jsonplace生成的，点击按钮用虚拟内容填充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

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

您需要做的是通过映射响应数据或简单地使用响应数据的< code>completed属性来填充to do列表。

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

响应待办事项的每个项目都有已完成的 prop，因此您可以使用该 prop。

这就是你要做的：

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>

Answer 2

使用axios API，我获取待办事项，并务实地循环访问各个待办事项，并将isActive prop应用于所有这些待办事项。现在，在将待办事项 ID 传递给方法时，可以通过切换待办事项来切换这些道具。:-)

请注意，我在< code>ul上应用了< code > v-if = " todo . is active " ，如果您想要应用一些样式，例如用于过渡等，这也可以翻译为< code >:class = " { active:todo . is active } " 。

通过使用这种方法，您可以使用相同的逻辑来创建方法，例如完成Todo和远程Todo等

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

我注意到你使用了< code>v-bind和< code>v-on -这是绝对有效的，但是VUE ^2.0可以处理速记绑定:-)

我还注意到您在HTML属性中使用单引号...虽然这不会破坏您的标记，但我认为将它们保留为双引号是最佳做法。

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>