因此,当 <li>
时,我创建了一个基本任务列表,我想在其中完成它们被点击。单击它时,我希望将一个类添加到 <li>
多数民众赞成在点击。我无法通过文档解决这个问题,所以我希望有人能帮助我:D
我已有的代码:
<transition-group name="list">
<li class="list-item list-group-item" v-for="(task, index) in list" :key="task.id" v-on:click="finishTask(task.id)" >
@{{ task.text }}
<button @click="removeTask(task.id)" class="btn btn-danger btn-xs pull-right">Delete</button>
</li>
</transition-group>
</ul>
</div>
// get the csrf token from the meta
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
list: [],
taskInput: {
id: '',
text: ''
}
};
},
// So the tasks will show when the page is loaded
created() {
this.allTasks();
},
methods: {
// get all the existing tasks
allTasks() {
axios.get('tasks').then((response) => {
this.list = response.data;
});
},
// create a new task
createTask() {
axios({
method: 'post',
url: '/tasks',
data: {
_token: csrf_token,
text: this.taskInput.text,
},
}).then(response => {
this.taskInput.text = '';
this.allTasks();
});
},
// remove the tasks
removeTask(id) {
axios.get('tasks/' + id).then((response) => {
this.allTasks();
});
},
finishTask(id) {
axios({
method: 'post',
url: 'tasks/done/' + id,
data: {
_token: csrf_token,
data: this.taskInput,
},
}).then(response => {
this.allTasks();
});
}
}
}
我知道我应该如何使用 jquery 而不是 vue js,我希望这不是一个愚蠢的问题 :D
最佳答案
您可以 bind css classes and styles ,将 bool 值 done
属性添加到您的笔记对象,默认值为 false
,当您单击该笔记时,将其 done
属性更改为 真
。这是一个例子
new Vue({
el:"#app",
data:{
notes: [
{ text: "First note", done:false },
{ text: "Second note", done:false },
{ text: "Third note", done:false },
{ text: "Fourth note", done:false },
{ text: "Fifth note", done:false }
]
},
methods:{
finishNote(note){
// send your api request
// then update your note
note.done = true
}
}
})
.done{
background-color:green;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="note in notes" :class="{done:note.done}" @click="finishNote(note)">{{note.text}}</li>
</ul>
</div>
关于laravel - Vue.js 在特定元素上添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48689387/