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

Question

我正在制作一份 响应式 yes/no 问卷，用户可以 select 或 yes/no 回答每个提出的问题。

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

当我 重新调整 window 大小时，我的问题就出现了！布局适当更改，但收音机 selection 不见了。

有什么想法可以让 selection 保持 window 大小吗？

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>

Answer 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>

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

How to update radio-buttons group based on selection

radio-button

vue.js

tailwind-css