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

Question

我有一个应答是/否问卷的工作，用户可以选择对每一个提出的问题是/否。

我希望每个questionCard组件都有一个单选按钮组(是/否)。无线电圈应该是隐藏的，只有标签是可见的。单击标签应选择appropiate选项。所有这些都可以工作，

当我调整大小窗口时，我的问题出现了！布局发生了很大的变化，但是无线电选择已经消失了。

有什么想法吗?无论窗口大小如何，我都能保留选择吗？

CodeSandbox

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对元素进行大小控制。

对于不同的屏幕大小，您不需要不同的输入。像这样

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