时间戳

首页 > 解决方案 > 尝试从 vuex 存储中循环值，如果我检查代码它看起来正确但是当我检查复选框和收音机时它不起作用

vue.js - 尝试从 vuex 存储中循环值，如果我检查代码它看起来正确但是当我检查复选框和收音机时它不起作用

问题描述

我的 vuex 存储数组

    itemsToCheck: [
      {id: 'tornfalksgrand2_diskborste', title: 'Diskborste', name: 'tornfalksgrand2_diskborste', label: 'Check!', type: 'checkbox', url: require('../assets/diskborste.jpg'), alt: 'diskborste', value: 'tornfalksgrand2_diskborste_finns', additionalText: ''},
      {id: 'tornfalksgrand2_disktrasa', title: 'Disktrasa', name: 'tornfalksgrand2_disktrasa', label: 'Check!', type: 'checkbox', url: require('../assets/disktrasa.png'), alt: 'disktrasa', value: 'tornfalksgrand2_disktrasa_finns', additionalText: ''},
      {id: 'tornfalksgrand2_vaskskrapa', title: 'Vaskskrapa', name: 'tornfalksgrand2_vaskskrapa', label: 'Check!', type: 'checkbox', url: require('../assets/vaskskrapa.webp'), alt: 'vaskskrapa', value: 'tornfalksgrand2_vaskskrapa_finns', additionalText: ''},
      {id: 'tornfalksgrand2_alloren', title: 'Alloren', name: 'tornfalksgrand2_alloren', label: 'Check!', type: 'checkbox', url: require('../assets/alloren.webp'), alt: 'alloren', value: 'tornfalksgrand2_alloren_finns', additionalText: 'Fyll på befintlig flaska, eller spä ut med lite vatten.'},
      {id: 'tornfalksgrand2_moppgarn', title: 'Moppgarn', name: 'tornfalksgrand2_moppgarn', label1: 'Finns!', label2: 'Fattas!', type: 'radio', url: require('../assets/moppgarn.jpg'), alt: 'moppgarn', value1: 'tornfalksgrand2_moppgarn_finns', value2: 'tornfalksgrand2_moppgarn_fattas', additionalText: 'Om moppen är väldigt smutsig, bocka i "Fattas" så byter vi den senare.'},
      {id: 'tornfalksgrand2_moppskaft', title: 'Moppskaft', name: 'tornfalksgrand2_moppskaft', label1: 'Finns!', label2: 'Fattas!', type: 'radio', url: require('../assets/moppskaft.jpg'), alt: 'moppskaft', value1: 'tornfalksgrand2_moppskaft_finns', value2: 'tornfalksgrand2_moppskaft_fattas', additionalText: ''},
      {id: 'tornfalksgrand2_mopphink', title: 'Mopphink', name: 'tornfalksgrand2_mopphink', label1: 'Finns!', label2: 'Fattas!', type: 'radio', url: require('../assets/mopphink.jpg'), alt: 'mopphink', value1: 'tornfalksgrand2_mopphink_finns', value2: 'tornfalksgrand2_mopphink_fattas', additionalText: ''},
      {id: 'tornfalksgrand2_sopborste', title: 'Sopborste', name: 'tornfalksgrand2_sopborste', label1: 'Finns!', label2: 'Fattas!', type: 'radio', url: require('../assets/sopborste.png'), alt: 'sopborste', value1: 'tornfalksgrand2_sopborste_finns', value2: 'tornfalksgrand2_sopborste_fattas', additionalText: ''},
      {id: 'tornfalksgrand2_sopskyffel', title: 'Sopskyffel', name: 'tornfalksgrand2_sopskyffel', label1: 'Finns!', label2: 'Fattas!', type: 'radio', url: require('../assets/sopskyffel.png'), alt: 'sopskyffel', value1: 'tornfalksgrand2_sopskyffel_finns', value2: 'tornfalksgrand2_sopskyffel_fattas', additionalText: ''},
      {id: 'tornfalksgrand2_lysror', title: 'Lysrör', name: 'tornfalksgrand2_lysror', label1: 'Hela!', label2: 'Trasiga', type: 'radio', url: require('../assets/lysror.jpg'), alt: 'lysror', value1: 'tornfalksgrand2_lysror_hela', value2: 'tornfalksgrand2_lysror_trasiga', additionalText: 'Se till att inga lysrör blinkar eller är trasiga.'},
      {id: 'tornfalksgrand2_nodutgang', title: 'Nödutgång', name: 'tornfalksgrand2_nodutgang', label: 'Check!', type: 'checkbox', url: require('../assets/nodutgang.jpg'), alt: 'nodutgang', value: 'tornfalksgrand2_nodutgang_inte_blockerad', additionalText: 'Se till att nödutgången inte är blockerad.'},
      {id: 'tornfalksgrand2_proppskap', title: 'Proppskåp', name: 'tornfalksgrand2_proppskap', label: 'Check!', type: 'checkbox', url: require('../assets/proppskap.webp'), alt: 'proppskap', value: 'tornfalksgrand2_proppskap_hela', additionalText: 'Alla knapparna på proppskåpet ska peka uppåt.'}
    ],

在我的数据属性中

data () {
        return {
            selected: [],
            isChecked: this.initIsChecked()
        }
      },

我的 html 循环

    <div class="max-w-sm rounded overflow-hidden shadow-lg mb-8" v-for="item in $store.state.itemsToCheck" :key="item.id">
      <img class="w-full" :src="item.url" :alt="item.alt">
      <div class="px-6 py-4 text-center">
        <div class="font-bold text-xl mb-2">{{ item.title }}</div>
        <div class="flex items-center justify-center">
            <input v-if="item.type == 'checkbox'" :id="item.id" class="form-checkbox text-green-500 h-6 w-6" v-model="selected" :name="item.name" :type="item.type" v-bind:value="item.value">
            <label v-if="item.type == 'checkbox'" :for="item.id" class="ml-3 block text-sm font-medium text-gray-700">{{ item.label }}</label>

            <input v-if="item.type == 'radio'" :id="item.id+'_finns'" class="form-checkbox text-green-500 h-6 w-6" v-model="selected" :name="item.name" :type="item.type" v-bind:value="item.value1">
            <label v-if="item.type == 'radio'" :for="item.id+'_finns'" class="ml-3 block text-sm font-medium text-gray-700">{{ item.label1 }}</label>

            <input v-if="item.type == 'radio'" :id="item.name+'_fattas'" class="form-checkbox text-green-500 h-6 w-6" v-model="selected" :name="item.name" :type="item.type" v-bind:value="item.value2">
            <label v-if="item.type == 'radio'" :for="item.name+'_fattas'" class="ml-3 block text-sm font-medium text-gray-700">{{ item.label2 }}</label>
        </div>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 text-center">{{ item.additionalText }}</span>
      </div>
    </div>

我的输出html

<div class="text-base text-center mt-4">{{ selected }}</div>

当我检查 devtools 中的元素时，所有名称和值似乎 都是 chrome devtools 检查器的正确图像

我的问题是我可以检查所有复选框，直到我检查第一个单选按钮，然后所有复选框都将被取消选中......也许我错过了什么？

标签： vue.jsvuextailwind-css

解决方案

我认为问题在于收音机和复选框的 v-model 值背后。在您拥有的收音机上，v-model="selected" 我认为这是正确的。但是在复选框上，你v-model="selected"又有了。这可能是问题所在。

推荐阅读