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对象，以包含对象而不是字符串。该对象将包含用户选择的问题和答案。这样，每个问题都会有一个具体的答案，并且用户只能选择一个答案，因为它将覆盖旧值。

注： @click是 的简写v-on:click，:class是 的简写v-bind:class

选项1：

new Vue({

  el: '#app',

  data: {

    answers: {},

    currentQuestion: {

      examples: {

        A:  {

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

          pickedAnswer: null

        },

        B:  {

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

          pickedAnswer: null

        },

        C:  {

          question: 'Silizium zur Herstellung der CPU',

          pickedAnswer: null

        },

        D:  {

          question: 'Schrauben zum Befestigen von Bauteilen',

          pickedAnswer: null

        },

        E:  {

          question: 'Zugekaufte Computergehäuse aus Stahlblech',

          pickedAnswer: null

        }

      },

      answers: {

        '1': 'Rohstoff',

        '2': 'Fremdbauteil',

        '3': 'Hilfsstoff',

        '4': 'Betriebsstoff'

      },

      rights: {

        A: 3,

        B: 4,

        C: 1,

        D: 3,

        E: 2

      }

    }

  }

});

<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

      :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.question }}</p>

      </div>

      <div

        :key="index"

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

        class="col-md-6"

      >

        <p>

          <button

            :class="{

              'btn-primary': example.pickedAnswer == key,

              'btn-secondary': example.pickedAnswer != key

            }"

            @click="example.pickedAnswer = key"

            class="btn btn-lg btn-block"

          >

            {{ answer }}

          </button>

        </p>

      </div>

    </div>

 </div>

examples您可以向对象添加新属性，而不是将其转换为currentQuestion对象。我pickedAnswers在示例中调用了它，该对象将包含用户选择的答案。

选项2：

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'

      },

      pickedAnswers: {

        A: null,

        B: null,

        C: null,

        D: null,

        E: null,

      },

      answers: {

        '1': 'Rohstoff',

        '2': 'Fremdbauteil',

        '3': 'Hilfsstoff',

        '4': 'Betriebsstoff'

      },

      rights: {

        A: 3,

        B: 4,

        C: 1,

        D: 3,

        E: 2

      }

    }

  }

});

<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

      :key="index"

      v-for="(example, questionKey, 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

        :key="index"

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

        class="col-md-6"

      >

        <p>

          <button

            :class="{

              'btn-primary': currentQuestion.pickedAnswers[questionKey] == key,

              'btn-secondary': currentQuestion.pickedAnswers[questionKey] != key

            }"

            @click="currentQuestion.pickedAnswers[questionKey] = key"

            class="btn btn-lg btn-block"

          >

            {{ answer }}

          </button>

        </p>

      </div>

    </div>

 </div>