复选框无法与 Array 一起正常工作

Question

我有一个表单，一旦某些复选框被选中，我需要它们来 v-show 额外的表单组件。我可以让它工作，有点。如果您只选择 1 个选项，它将填充正确的表单，但是，如果进行了多项选择，它不会显示其他表单组件。这是我的代码。似乎通过商店获得了正确的值，我只是遗漏了一些东西。如果这是一个重复的问题，我提前道歉。我觉得在过去的几周里我已经阅读了所有的 Whosebug :) 这是它有点工作的截屏视频 http://somup.com/c3hD0TtnJh 我正在使用 Formkit、Vue3、Pinia。提前致谢。

App.vue

<template>
   <ReasonForVisit  />
   <Sports v-show="data.reasonForVisit == 'si' " />
   <WorkComp v-show="data.reasonForVisit == 'wc' " />
   <Accident v-show="data.reasonForVisit == 'aa' " />
</template>

<script>
  import ReasonForVisit from './components/ReasonForVisit.vue'
  import Sports from './components/Sports.vue'
  import WorkComp from './components/WorkComp.vue'
  import Accident from './components/Accident.vue'
  import { useFormStore} from './stores/formStore.js'
    
  const data = useFormStore()
     
</script>

ReasonForVisit.vue

<template>
  <FormKit
     v-model="data.reasonForVisit"
     type="checkbox"
     label="Reason for Visit"
     :options="{
       we: 'Wellness Check',
       aa: 'Auto Accident', 
       si: 'Sports Injury', 
       wc: 'Work Comp' }"
     validation="required" 
     @change="data.checkedReason" 
  />  
<p>reason: {{ data.reasonForVisit }}</p>
</template>

FormStore.js

import { defineStore } from 'pinia'
import { differenceInYears, parseISO } from 'date-fns'
    
export const useFormStore = defineStore('formStore', {
  state: () => ({
        reasonForVisit: [],
      }),
    },
  }
)

Answer 1

您无法将 Array 与 string 进行比较。您需要对其进行迭代或过滤或使用 include 方法并检查它是否包含正确的单词。为此，请阅读 computed() 属性。如果您是编程新手，请使用 === 而不仅仅是 == 否则您最终会在代码中出现严重错误。

示例：

<template>
   <ReasonForVisit  />
   <Sports v-show="containsSi" />
   <WorkComp v-show="containsWc" />
   <Accident v-show="containsAa" />
</template>

<script>
  import ReasonForVisit from './components/ReasonForVisit.vue'
  import Sports from './components/Sports.vue'
  import WorkComp from './components/WorkComp.vue'
  import Accident from './components/Accident.vue'
  import { useFormStore} from './stores/formStore.js'

  const data = useFormStore()

  const containsSi = computed(() => data.reasonForVisit.includes('si'))
  const containsWc = computed(() => data.reasonForVisit.includes('wc'))
  const containsAa = computed(() => data.reasonForVisit.includes('aa'))
 
</script>

Answer 2

您的 reasonForVisit 是一个数组，因为您在 FormStore.js 中将其初始化为 reasonForVisit: []。

而不是 data.reasonForVisit == 'si' 和其他人，如果您检查 data.reasonForVisit.includes('si')，它应该按预期工作。

它现在不应该适用于 1 个选项，我认为它适用于 1 个选项的唯一原因是 == 运算符认为 si 与 ['si']。你应该使用严格相等来避免js中的此类错误。

复选框无法与 Array 一起正常工作

Checkboxes not working correctly with Array

vuejs3

pinia

App.vue

ReasonForVisit.vue

FormStore.js