Getting Error in nested template with x-for

[Rashuoo7]

I am experiencing errors when I use a language toggle which change a language value in the alpine js object.

`

<div id="main" x-data="
{
 @if($data != null)
    questions:
        [
            @foreach($questions as $question)
            {
                hindi:
                {
                    question: `{{$question->hindi_question}}`,
                    answer: `{{$this->answerToInteger($question->answer)}}`,
                    marked_answer: `{{$data->where('question_id', $question->id)->where('test_session_id', $test_session->id)->first()->marked_answer}}`,
                    options: [
                        @foreach($question->options as $option)
                            `{{$option->hindi_option}}`,
                        @endforeach
                    ],
                    explanation: `{{$question->hindi_explanation}}`
                },
                english:
                {
                    question: `{{$question->english_question}}`,
                    answer: `{{$this->answerToInteger($question->answer)}}`,
                    marked_answer: `{{$data->where('question_id', $question->id)->where('test_session_id', $test_session->id)->first()->marked_answer}}`,
                    options: [
                        @foreach($question->options as $option)
                            `{{$option->english_option}}`,
                        @endforeach
                    ],
                    explanation: `{{$question->english_explanation}}`
                }
            },
            @endforeach
        ],
        {{-- 0 = Result, 1 = Detailed Analysis --}}
    activeView: true,
    language: @entangle('language').live,
    answerToChar(answer){
    if(answer == 0){
    return 'a'
    }else if(answer == 1){
    return 'b'
    }else if(answer == 2){
    return 'c'
    }else if(answer == 3){
    return 'd'
    }else return '';
    },
    getYourAnswer(question){
        if(this.language == 'hindi'){
            if(question.hindi.options[question.hindi.marked_answer] != null){
                let an;
                if(question.hindi.marked_answer != question.hindi.answer)
                { an = 'Incorrect' }
                else {
                 an = 'Correct'
                }
                return an +'<br>'+'('+this.answerToChar(question.hindi.marked_answer)+') '+question.hindi.options[question.hindi.marked_answer];
            }
            else{
                return 'Not Attempted';
            }
        }
        else{
            if(question.english.options[question.english.marked_answer] != null){
                return '('+this.answerToChar(question.hindi.marked_answer)+') '+question.english.options[question.english.marked_answer];
            }
            else{
                return 'Not Attempted';
            }
        }
    }
    @endif
}
">
    <x-public-navigation-menu position=""/>
    <div class="py-5 lg:py-12 w-11/12 mx-auto">
        <h1 class="px-5 py-2 text-slate-800 font-semibold text-base tracking-wider block border-l-4 border-black bg-amber-400 lg:py-3 md:inline-block md:text-lg">Result & Detailed Analysis</h1>

        <div class="flex justify-between flex-col w-full md:flex-row print:hidden">
            {{--Language Toggle--}}
            <div>
                <div class="my-3 inline-flex flex-wrap border rounded-full border-black bg-white lg:my-4">
                    <div @click="language = 'hindi'" :class="language == 'hindi' ? 'border-r bg-green-400' : ''" class="transition ease-in-out duration-300 px-3 py-1 text-slate-800 font-semibold text-base border-black tracking-wider inline-block cursor-pointer rounded-full lg:py-3 lg:px-5 lg:text-lg">Hindi</div>
                    <div @click="language = 'english'" :class="language == 'english' ? 'border-l border-black bg-green-400' : ''" class="transition ease-in-out duration-300 px-3 py-1 text-slate-800 font-semibold text-base tracking-wider inline-block cursor-pointer rounded-full lg:py-3 lg:px-5 lg:text-lg">English</div>
                </div>
            </div>
        </div>

        <template x-for="(question, index) in questions" :key="index">
            <tr>
                <td x-text="index+1" class="px-2 py-2 font-bold lg:px-6 lg:py-4 ">
                </td>
                <td class="px-2 py-2 lg:px-6 lg:py-4 text-sm">
                    <div x-text="language == 'hindi' ? question.hindi.question : question.english.question" class="font-bold whitespace-pre-wrap"></div>
                    <template x-for="(option, index) in (language == 'hindi' ? question.hindi.options : question.english.options)" x-key="index">
                        <div><span x-text="'('+answerToChar(index)+')'" class="font-bold"></span> <span x-text="option"></span></div>
                    </template>
                </td>
                <td x-text="language == 'hindi' ? '('+answerToChar(question.hindi.answer)+') '+question.hindi.options[question.hindi.answer] : '('+answerToChar(question.hindi.answer)+') '+question.english.options[question.english.answer]" class="px-2 py-2 lg:px-6 lg:py-4 text-sm">
                </td>
                <td x-html="getYourAnswer(question)" :class="question.hindi.marked_answer == question.hindi.answer ? 'text-green-500' : 'text-red-500'" class="w-1/6 px-2 py-2 lg:px-6 lg:py-4 text-sm">
                </td>
                <td x-text="language == 'hindi' ? question.hindi.explanation : question.english.explanation" class="px-2 py-2 text-sm whitespace-pre-wrap lg:px-6 lg:py-4">
                </td>
            </tr>
        </template>
        </div>
    </div>

</div>

`

[ekwoka]

This is because your key is the index, so when templates are getting moves and changed it loses it's references. It should be harmless as it should be fixing itself, but that is the cause.

[ekwoka]

You're still using the index.

It wasn't the NAME index that was the issue, but that the data was the index.

[Rashuoo7]

still getting error
<template x-for="question in questions" > <tr> <td class="px-2 py-2 lg:px-6 lg:py-4 text-sm"> <div x-text="language == 'hindi' ? question.hindi.question : question.english.question" class="font-bold whitespace-pre-wrap"></div> <template x-for="option in (language == 'hindi' ? question.hindi.options : question.english.options)" > <div><span class="font-bold"></span> <span x-text="option"></span></div> </template> </td> <td x-text="language == 'hindi' ? '('+answerToChar(question.hindi.answer)+') '+question.hindi.options[question.hindi.answer] : '('+answerToChar(question.hindi.answer)+') '+question.english.options[question.english.answer]" class="px-2 py-2 lg:px-6 lg:py-4 text-sm"> </td> <td x-html="getYourAnswer(question)" :class="question.hindi.marked_answer == question.hindi.answer ? 'text-green-500' : 'text-red-500'" class="w-1/6 px-2 py-2 lg:px-6 lg:py-4 text-sm"> </td> <td x-text="language == 'hindi' ? question.hindi.explanation : question.english.explanation" class="px-2 py-2 text-sm whitespace-pre-wrap lg:px-6 lg:py-4"> </td> </tr> </template>

[ekwoka]

Please format your blocks correctly.

And this is STILL using the index.

no key defaults to index.

You need to provide actual unique keys.

[Rashuoo7]

This was the culprit. I replaced @entangle('language').live with 'hindi' as default value.
language: @entangle('language').live