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我得到todos并实际循环遍历各个待办事项并将isActive道具应用于所有这些道具。现在，当将待办事项“toggleTodo传递给方法时，可以通过id切换这些道具。： - ）

注意我已在v-if="todo.isActive"上应用ul如果您想要应用某些样式，例如转换等，也可以将其转换为:class="{active: todo.isActive}"。

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

我添加了showList道具以显示/隐藏实际的完整列表。

我注意到您正在使用v-bind和v-on - 这绝对有效，但VUE ^ 2.0可以处理vtd-xml-author： - ）

我还注意到您对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道具，所以你可以使用它。

你是怎么做的：

＆＃13;

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;
    }
  }

})

＆＃13;

<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>

＆＃13;

在Vue JS中切换单个元素的类

2 个答案: