Question

如何按字母顺序列出选项。我正在从代码here运行测验应用程序。我需要按字母顺序列出响应。我该怎么办？

下面是发送到模板的问题列表

var quiz = {

    title: 'My quiz',

    questions: [

      {

        text: "Question 1",

        responses: [

          {text: 'Wrong, too bad.'}, 

          {text: 'Right!', correct: true}, 

        ]

      }, {

        text: "Question 2",

        responses: [

          {text: 'Right answer', correct: true}, 

          {text: 'Wrong answer'}, 

        ]

      } 

    ]

  };

我正在尝试使用过滤器

  Vue.filter('myMapping',function(index){
  mapping = ["A", "B", "C" , "D", "E"];
      return mapping[index];
  });


   <div class="ques_block" v-for="(question, index) in quiz.questions">

    <div v-show="index === questionIndex">
        <h3>{{index + 1}}) {{question.text}}</h3>
            <div class="option_div" v-for="(response,resp) in question.responses">
                <input type="radio" v-bind:name="index"  v-bind:value="response.correct"  v-model="userResponses[index]"/>
                <label> {{resp| myMapping}})  {{response.text}} </label>
            </div>
                        </div>
                       </div>

Jsfiddle Link

Answer 1

这比vuejs问题更多是JavaScript问题。您需要在显示数组之前对其进行排序。

在声明数组后，您可以运行此排序摘要。

quiz.questions.sort((a, b) => a.text.localeCompare(b.text));
quiz.questions.forEach(({ responses }) => responses.sort((a, b) => a.text.localeCompare(b.text)));

这是在使用升序对键（文本）进行排序的同时对外部“对象”进行排序，一旦对外部对象进行了排序，就可以遍历对象内部的response数组以使用键对每个对象进行排序（文字）按升序排列。

如何按字母顺序列出选项Vue.js

1 个答案: