laravel Vue.js 在特定元素上添加类

Vue.js add class on specific element

提问by frogeyedman

So im creating a basic tasklist where i want to set them done, when the <li>is clicked. When it's clicked i want that a class is added to the <li>thats clicked. i could not figure this out with the docs so i hope someone could help me out :D

所以我创建了一个基本的任务列表，我想在<li>点击时将它们设置为完成。当它被点击时，我希望将一个类添加到<li>点击的那个。我无法通过文档解决这个问题，所以我希望有人可以帮助我：D

The code i already have:

我已经拥有的代码：

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

I know how i should do this with jquery but not with vue js, i hope this aint a to stupid question :D

我知道我应该如何使用 jquery 而不是 vue js，我希望这不是一个愚蠢的问题：D

回答by Mohd_PH

You can bind css classes and styles, add a Boolean doneproperty to your note object with default value of false, when you click the note change its doneproperty to true. here is an example

您可以绑定 css 类和样式，done向您的便笺对象添加一个布尔属性，默认值为false，当您单击便笺时，将其done属性更改为true. 这是一个例子

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/[email protected]/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>

回答by V. Sambor

You can use the eventargument. Which is automatically provided on your on click method.

您可以使用事件参数。这是在您的点击方法中自动提供的。

onListClicked(event) {
  event.target.className += " myClass";
}

Here I did a demo for you: https://jsfiddle.net/6wpbp70g/

这里我给大家做了个demo：https: //jsfiddle.net/6wpbp70g/