films-symfony-4-2/assets/js/Components/Seen.vue

<template>
  <i  @click="fetchData" data-bs-toggle="tooltip" :title=tooltipMessage :class="[ state ? statusOn : statusOff ]"></i>
</template>

<script>
import axios from "axios"

export default {
    props: {
        content: { type: String },
        path: { type: String },
        initialState: { type: Boolean, default: false },
        stateOn: { type: String },
        stateOff: { type: String },
        textOn: { type: String },
        textOff: { type: String }
    },
    data () {
        return {
            filmId: this.content,
            state: this.initialState,
            statusOn: this.stateOn,
            statusOff: this.stateOff,
        }
    },
    computed: {
        tooltipMessage() {
            return (this.state ? this.textOn : this.textOff)
        }
    },
    methods: {
        fetchData() {
            axios.post( this.path, {
                id_film: this.filmId
            },{
                headers: {'X-Requested-With': 'XMLHttpRequest'},
            }).then(response => {
                this.state = response.data.newState
            })
        }
    },
}
</script>

<style>

</style>