finchy70
172
3
Vue

htmlspecialchars error

Posted 2 months ago by finchy70

I deleted my original post in error after I quickly solved my problem.

My issue was a htmlspecialchars error when passing data to this vue component

<template>
    <div>
        <div class="row">
            <div class="col-1">#</div>
            <div class="col-5">Question</div>
            <div class="col-2">Section</div>
            <div class="col-2">Type</div>
            <div class="col-2">Option</div>
        </div>
        <hr>
        <div v-for="question in questions">
            <div class="row">
                <div class="col-1">{{ question.id }}</div>
                <div class="col-5">{{ question.question }}</div>
                <div class="col-2">{{ question.section_id}}</div>
                <div class="col-2">{{ question.question_type.description}}</div>
                <div v-if="checkSelected(question.id)" class="col-2"><button @click="removeQuestion(question.id)" class="btn btn-warning btn-sm">Remove</button></div>
                <div v-else class="col-2"><button @click="addQuestion(question.id)" class="btn btn-success btn-sm">Add</button></div>
            </div>
            <hr>
        </div>
        <div class="row">
            <button class="btn btn-sm btn-info ml-auto mr-3" @click="saveQuestions()">Save Questions</button>
        </div>
    </div>

</template>

<script>
    export default {
        props: ["questions", "plant", "list"],

        data: function () {
            return {
                selected: [...this.list]
            }
        },

        mounted() {
            console.log(this.selected);
        },

        methods: {
            checkSelected: function (check) {
                var length = this.selected.length;
                for (var i = 0; i < length; i++) {
                    if (this.selected[i] === check) return true;
                }
                return false;
            },


            addQuestion: function (add) {
                this.selected.push(add)
                console.log("selected="+this.selected, "old="+this.list);
            },

            removeQuestion: function (remove) {
                var length = this.selected.length;
                for (var i = 0; i < length; i++) {
                    if (this.selected[i] === remove) this.selected.splice(i, 1);
                    console.log("selected="+this.selected, "old="+this.list);
                }
            },

            saveQuestions: function () {
                axios.post('/plant_types/questions', {

                    questions: this.selected,
                    plant: this.plant.id,
                    old: this.list
                })
                    .then(response => {
                        window.location.href = '/plant_types/' + this.plant.id;
                    })
                    .catch(e => {
                    })
            }
        }
    }
</script>

It turns out that I was passing a collection of objects as the questions prop. I then plucked the ids instead

$questions = Question::orderBy('section_id', 'asc')->pluck('id');

and passing this array fixed the issue

Sorry again but this should now give the post some value again.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.