如何根据选择更新单选按钮组答案

【问题标题】：How to update radio-buttons group based on selection如何根据选择更新单选按钮组
【发布时间】：2021-11-10 18:37:50
【问题描述】：

我正在编写一份响应式是/否调查问卷，用户可以在其中对每个提出的问题选择是/否。

我希望每个 questionCard 组件都有一个单选按钮组（是/否）。无线电圈应该被隐藏，只有标签应该是可见的。单击标签应选择适当的选项。 一切正常

当我重新调整窗口大小时，我的问题就出现了！布局适当更改，但收音机选择消失了。

有什么想法可以让我保持选择而不管窗口大小？

App.vue

<template>
  <parent-component />
</template>

<script>
import parentComponent from "./components/parentComponent.vue";
export default {
  name: "App",
  components: {
    parentComponent,
  },
};
</script>

<style>
</style>

Parent.vue

<template>
  <div>
    <question-card
      v-for="car in objectData.cars.data"
      :key="car.id"
      :carData="car"
    ></question-card>
  </div>
</template>

<script>
import questionCard from "./questionCard.vue";
export default {
  name: "App",
  components: {
    questionCard,
  },
  data() {
    return {
      objectData: {
        cars: {
          data: [
            {
              id: 1,
              name: "Do You Like Tesla?",
            },
            {
              id: 2,
              name: "Do You Like BMW?",
            },
            {
              id: 3,
              name: "Do You Like AUDI?",
            },
          ],
        },
      },
    };
  },
};
</script>

Questioncard.vue

<template>
  <br />
  <br />
  <div class="hidden sm:block">
    <h1>Lage Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'yes'"
      />
      <label
        :for="carData.id + 'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'no'"
      />
      <label
        :for="carData.id + 'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>
  <div class="sm:hidden">
    <h1>Small Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'yes'"
      />
      <label
        :for="carData.id + 'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'no'"
      />
      <label
        :for="carData.id + 'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["carData"],
  data() {
    return {
      selected: null,
    };
  },
  methods: {
    onChange(event) {
      this.selected = event.target.value;
    },
  },
};
</script>

<style scoped>
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  background-color: #78be20;
}
</style>

【问题讨论】：

标签： vue.js radio-button tailwind-css

【解决方案1】：

我看到您正在使用 TailwindCSS。您可以在元素上使用w-1/2 sm:w-full 控制大小

对于不同的屏幕尺寸，您不需要不同的输入。 Like this

  <div class="">
    <h1>Any size Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center justify-center w-1/2 sm:w-full">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'yes'"
      />
      <label
        :for="carData.id + 'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center justify-center w-1/2 sm:w-full">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id + 'no'"
      />
      <label
        :for="carData.id + 'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>

【讨论】：