[Vue 3] Vue 배열 내림차순 정렬

 

App.vue

const quizList = ref([
    {pk: 1, question:'Python 웹 프레임워크 중 하나로 마이크로 웹 프레임 워크로 빠른 개발을 지원하는 것은?', answer :'flask'},
    {pk: 2, question:'HTML에서 텍스트 입력란을 만드는 데 사용되는 요소는?', answer :'input'},
    {pk: 3, question:'웹 애플리케이션에서 클라이언트의 데이터를 서버로 전송할 "때 주로 사용되는 HTTP 메서드는?"', answer :'post'},
    {pk: 4, question:'Python 의 가상 환경을 만들어 프로젝트 별로 라이브러리 의존성을 격리시키는 명령어는?', answer :'virtualenv'},
    {pk: 5, question:'웹 애플리케이션을 개발할 때, 사용자의 브라우저에 보여지는 부분을 렌더링 하는 언어는 무엇인가요?', answer :'html'},
])

const createQuiz = function(arr){
    const tmp = {pk: quizList.value.length+1, question: arr.question, answer: arr.answer}
    quizList.value.push(tmp)
}

const sortedQuizList = computed(()=>{
    return quizList.value.sort((a,b) => b.pk - a.pk)
})

computed(() ->{

return 배열.value.sort((a,b) ->b.pk - a.pk )

})

실시간으로 배열의 값을 감시해야하기 때문애 computed ㅂ

 

Create.vue

<template>
    <div class="quiz-create-container">
        <div class="quiz-create-title">
            퀴즈 생성
        </div>
        <div class="quiz-create-content">
            <div><label>문제</label></div>
            <input type="text" id="question" v-model="question">
            <div><label>답안</label></div>
            <input type="text" id="answer" v-model="answer">
        </div>
        <button class="quiz-create-btn" @click="createQuiz">퀴즈 생성</button>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const question = ref('')
const answer = ref('')

const emit = defineEmits(['createQuiz'])

const createQuiz = (()=>{
    emit('createQuiz', {question: question.value, answer: answer.value})
})
</script>