Vue.js - 每组仅单击一个按钮即可生成动态按钮

Question

我在一个网站上有五个问题，每个问题有 4 个答案。每个问题只能点击一个按钮。

我怎样才能做到这一点？

new Vue({

  el: '#app',

  data: {

    answers: {},

    currentQuestion: {

      examples: {

        A: 'Lack zum Lackieren der Computergehäuse',

        B: 'Elektrische Energie für die Montagewerkzeuge',

        C: 'Silizium zur Herstellung der CPU',

        D: 'Schrauben zum Befestigen von Bauteilen',

        E: 'Zugekaufte Computergehäuse aus Stahlblech'

      },

      answers: {

        '1': 'Rohstoff',

        '2': 'Fremdbauteil',

        '3': 'Hilfsstoff',

        '4': 'Betriebsstoff'

      },

      rights: {

        A: 3,

        B: 4,

        C: 1,

        D: 3,

        E: 2

      }

    }

  },

  methods: {

    selectedOneAnswerButton(index) {

      Array.from(this.answers).forEach(answer => (answer.active = false));

      let answer = this.answers[index];

      answer.active = !answer.active;

      this.$set(this.answers, index, answer);

    }

  }

});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<div id="app">

<div

      v-bind:key="index"

      v-for="(example, index) in currentQuestion.examples"

      class="row"

    >

      <div class="col-md-12">

        <p class="p-3 mb-2 bg-dark text-white">{{ example }}</p>

      </div>

      <div

        v-bind:key="index"

        v-for="(answer, index) in currentQuestion.answers"

        class="col-md-6"

      >

        <p>

          <button

            v-bind:class="{

              'btn-primary': answer.active,

              'btn-secondary': !answer.active

            }"

            v-on:click="selectedOneAnswerButton(index)"

            class="btn btn-lg btn-block"

          >

            {{ answer }}

          </button>

        </p>

      </div>

    </div>

 </div>

那行得通

当我第一次需要它时，它起作用了，但当我第二次问一个有 4 个答案的简单问题时，它不起作用了……而且在当前有四个问题和四个可能答案的情况下当然不行。

可以在 VUE.JS 中执行此操作而不更改我的数据吗？

Answer 1

问题是你的答案是一个字符串，但你把它当作一个对象。尝试向其中添加active属性是行不通的。另一个问题是，如果修改answers，它将影响所有问题，而不仅仅是一个问题。因为它们都共享同一个数组。相反，我会修改您的examples对象，以包含对象而不是字符串。该对象将包含用户选择的问题和答案。这样，每个问题都会有一个具体的答案，并且用户只能选择一个答案，因为它将覆盖旧值。注：&nbsp;@click是 的简写v-on:click，:class是 的简写v-bind:class选项1：new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; answers: {},&nbsp; &nbsp; currentQuestion: {&nbsp; &nbsp; &nbsp; examples: {&nbsp; &nbsp; &nbsp; &nbsp; A:&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; question: 'Lack zum Lackieren der Computergehäuse',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pickedAnswer: null&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; B:&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; question: 'Elektrische Energie für die Montagewerkzeuge',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pickedAnswer: null&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; C:&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; question: 'Silizium zur Herstellung der CPU',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pickedAnswer: null&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; D:&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; question: 'Schrauben zum Befestigen von Bauteilen',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pickedAnswer: null&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; E:&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; question: 'Zugekaufte Computergehäuse aus Stahlblech',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pickedAnswer: null&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; answers: {&nbsp; &nbsp; &nbsp; &nbsp; '1': 'Rohstoff',&nbsp; &nbsp; &nbsp; &nbsp; '2': 'Fremdbauteil',&nbsp; &nbsp; &nbsp; &nbsp; '3': 'Hilfsstoff',&nbsp; &nbsp; &nbsp; &nbsp; '4': 'Betriebsstoff'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; rights: {&nbsp; &nbsp; &nbsp; &nbsp; A: 3,&nbsp; &nbsp; &nbsp; &nbsp; B: 4,&nbsp; &nbsp; &nbsp; &nbsp; C: 1,&nbsp; &nbsp; &nbsp; &nbsp; D: 3,&nbsp; &nbsp; &nbsp; &nbsp; E: 2&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }});<script src="https://cdn.jsdelivr.net/npm/vue"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="app"><div&nbsp; &nbsp; &nbsp; :key="index"&nbsp; &nbsp; &nbsp; v-for="(example, index) in currentQuestion.examples"&nbsp; &nbsp; &nbsp; class="row"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; <p class="p-3 mb-2 bg-dark text-white">{{ example.question }}</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; :key="index"&nbsp; &nbsp; &nbsp; &nbsp; v-for="(answer, index, key) in currentQuestion.answers"&nbsp; &nbsp; &nbsp; &nbsp; class="col-md-6"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'btn-primary': example.pickedAnswer == key,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'btn-secondary': example.pickedAnswer != key&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="example.pickedAnswer = key"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-lg btn-block"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ answer }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;</div>examples您可以向对象添加新属性，而不是将其转换为currentQuestion对象。我pickedAnswers在示例中调用了它，该对象将包含用户选择的答案。选项2：new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; answers: {},&nbsp; &nbsp; currentQuestion: {&nbsp; &nbsp; &nbsp; examples: {&nbsp; &nbsp; &nbsp; &nbsp; A: 'Lack zum Lackieren der Computergehäuse',&nbsp; &nbsp; &nbsp; &nbsp; B: 'Elektrische Energie für die Montagewerkzeuge',&nbsp; &nbsp; &nbsp; &nbsp; C: 'Silizium zur Herstellung der CPU',&nbsp; &nbsp; &nbsp; &nbsp; D: 'Schrauben zum Befestigen von Bauteilen',&nbsp; &nbsp; &nbsp; &nbsp; E: 'Zugekaufte Computergehäuse aus Stahlblech'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; pickedAnswers: {&nbsp; &nbsp; &nbsp; &nbsp; A: null,&nbsp; &nbsp; &nbsp; &nbsp; B: null,&nbsp; &nbsp; &nbsp; &nbsp; C: null,&nbsp; &nbsp; &nbsp; &nbsp; D: null,&nbsp; &nbsp; &nbsp; &nbsp; E: null,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; answers: {&nbsp; &nbsp; &nbsp; &nbsp; '1': 'Rohstoff',&nbsp; &nbsp; &nbsp; &nbsp; '2': 'Fremdbauteil',&nbsp; &nbsp; &nbsp; &nbsp; '3': 'Hilfsstoff',&nbsp; &nbsp; &nbsp; &nbsp; '4': 'Betriebsstoff'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; rights: {&nbsp; &nbsp; &nbsp; &nbsp; A: 3,&nbsp; &nbsp; &nbsp; &nbsp; B: 4,&nbsp; &nbsp; &nbsp; &nbsp; C: 1,&nbsp; &nbsp; &nbsp; &nbsp; D: 3,&nbsp; &nbsp; &nbsp; &nbsp; E: 2&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }});<script src="https://cdn.jsdelivr.net/npm/vue"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="app"><div&nbsp; &nbsp; &nbsp; :key="index"&nbsp; &nbsp; &nbsp; v-for="(example, questionKey, index) in currentQuestion.examples"&nbsp; &nbsp; &nbsp; class="row"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; <p class="p-3 mb-2 bg-dark text-white">{{ example }}</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; :key="index"&nbsp; &nbsp; &nbsp; &nbsp; v-for="(answer, key) in currentQuestion.answers"&nbsp; &nbsp; &nbsp; &nbsp; class="col-md-6"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'btn-primary': currentQuestion.pickedAnswers[questionKey] == key,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'btn-secondary': currentQuestion.pickedAnswers[questionKey] != key&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="currentQuestion.pickedAnswers[questionKey] = key"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-lg btn-block"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ answer }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;</div>