How to send props to Vue via Controller without requiring params like ID?

Hello, guys! I have results of users displayed as table and each each row has button for making request to get the user's result on that quiz and sending as params to the route user_id and quiz_id of the user. The response comes in new route. Here's the question: How not to see the result of the user in a new page but get it via axios.get() and display on the same page? Users and quizzes info come as props. In template I iterate through them. I think I need to save somehow those fields as objects in a local data. Here's the Exam controller:

public function result(){
        $quizzes = Quiz::with('users')->get();
        return Inertia::render('Result/Index', [
            'quizzes' => $quizzes,
            ]);
    }

    public function userQuizResult($userId, $quizId){
        $results = Result::where('user_id', $userId)->where('quiz_id', $quizId)->with('question')->with('answer')->get();
        $totalQuestions = Question::where('quiz_id', $quizId)->count();
        $attemptQuestion = Result::where('quiz_id', $quizId)->where('user_id', $userId)->count();
        $quiz = Quiz::where('id', $quizId)->get();
        $answers = DB::table('answers')->get();
        $ans = [];
        foreach($results as $answer){
            array_push($ans , $answer->answer->id);
        }
        $userCorrectedAnswer = Answer::whereIn('id', $ans)->where('is_correct', 1)->count();
        $userWrongAnswer = $totalQuestions - $userCorrectedAnswer;
        $percentage = ($userCorrectedAnswer/$totalQuestions)*100;
        return Inertia::render('Result/ViewResult', [
            'results' => $results, 
            'totalQuestions' => $totalQuestions, 
            'attemptQuestion' => $attemptQuestion, 
            'userCorrectedAnswer' => $userCorrectedAnswer, 
            'userWrongAnswer' => $userWrongAnswer, 
            'percentage' => $percentage,
            'quiz' => $quiz,
            'answers' => $answers,
            ]);
    }

Table in Result/Index.vue:

<template>
<div id="table"> 
            <v-row justify="center">
              <div class="tr">        
                <div class="td">Student ID</div> 
                <div class="td">Student</div>        
                <div class="td">Class</div> 
                <div class="td">Test ID</div>        
                <div class="td">Test</div>  
                <div class="td">Total Questions</div>    
              </div>  
            </v-row>    
            <v-col v-for="(quiz, id) in quizzes" :key="id">
                <div class="tr" v-for="(user, id) in quiz.users" :key="id">
                    <div class="td" v-bind="{'userId': user.id}">{{user.id}}</div>  
                    <div class="td">{{user.name}}</div>        
                    <div class="td">{{user.occupation}}</div>        
                    <div class="td">{{quiz.id}}</div>
                    <div class="td">{{quiz.name}}</div>
                    <div class="td">{{totalQuestions}}</div>
                  <v-form>
                        <input type="" :v-model="(quiz_id = quiz.id)" />
                        <input type="" :v-model="(user_id = user.id)" />
                        <inertia-link
                          :href="
                            route('userQuizResult', {
                              userId: user.id,
                              quizId: quiz.id,
                            })
                          "
                        >
                          <v-btn color="primary" class="white--text"
                            >Посмотреть результат</v-btn
                          >
                        </inertia-link>
                      </v-form>  
                </div>
            </v-col>  
          </div>
</template>
<script>
export default {
	props: ["quizzes"],
	mounted() {
    	this.fetchData()
	},
	methods: {
    	fetchData() {
      		axios.get('result/2/3', {})
      		.then(response => (console.log(response.data)))	// returns whole <!DOCTYPE html>
		    .catch(error => console.log(error))
    },
	}
}
</script>

Result of user with given user_id and quiz_id in Result/ViewResult.vue:

<template>
<div class="text-md mb-6">
            Total questions: <v-btn class="float-right" color="primary"> {{ totalQuestions }} </v-btn>
          </div>
          <div class="text-md mb-6">
             Attempt question: <v-btn class="float-right" color="orange"> {{ attemptQuestion }} </v-btn>
          </div>
          <div class="text-md mb-6">
              Correct: <v-btn class="float-right" color="success"> {{ userCorrectedAnswer }}  </v-btn>
          </div>
          <div class="text-md mb-6">
              Incorrect: <v-btn color="red" class="float-right white--text">{{ userWrongAnswer }} </v-btn> 
          </div>
</template>
<script>
export default {
	props: [
		"results",
   	 "quiz",
	    "totalQuestions",
    	"attemptQuestion",
	    "userCorrectedAnswer",
    	"userWrongAnswer",
	    "percentage",
    	"answers"
	]
}
</script>

Route:

Route::get('result', [ExamController::class, 'result'])->name('result');
Route::get('result/{userId}/{quizId}', [ExamController::class, 'userQuizResult'])->name('userQuizResult');

MohamedTammam

4 years ago

Level 51

Yes, it will return the full HTML page. That's the expected behavior. Think of Inertia as a normal app. When you are send a HTTP request and gets Inertia response, you will get the full HTML page if the request isn't made by Inertia itself.

So you have 2 options.

Send the quiz result as JSON
Load Inertia properly using <Link /> if it's get request.

1 like

Please or to participate in this conversation.