Флажки неправильно работают с массивом

У меня есть форма, в которой после проверки определенных флажков мне нужно, чтобы они отображали дополнительные компоненты формы. Я могу заставить его работать, вроде. Если вы выберете только 1 вариант, он заполнит правильную форму, однако, если выбрано несколько вариантов, дополнительные компоненты формы не отображаются. Вот мой код. Кажется, я получаю правильные значения через магазин, я просто что-то упускаю. Заранее извиняюсь, если это дублирующий вопрос. Я чувствую, что прочитал весь stackoverflow за последние несколько недель :) Вот скринкаст того, как он работает 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: [],
      }),
     },
   }
 )       
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
27
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Нельзя сравнивать 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>

Спасибо. Меня путают =, == и ===.

flourgirl 17.05.2022 02:50
Ответ принят как подходящий

Ваш reasonForVisit представляет собой массив, поскольку вы инициализируете его в FormStore.js как reasonForVisit: [].

Вместо data.reasonForVisit == 'si' и других, если вы отметите data.reasonForVisit.includes('si'), он должен работать как задумано.

Сейчас он не должен работать и для 1 варианта, я думаю, что единственная причина, по которой он работает для 1 варианта, заключается в том, что оператор == считает si таким же, как ['si']. Вы должны использовать строгое равенство, чтобы избежать таких ошибок в js.

Он не будет реактивным. Ей нужно использовать вычисляемое свойство.

Mises 17.05.2022 01:59

Или, может быть, вы правы. Мне нужно проверить. XD

Mises 17.05.2022 02:06

Я думаю, вы правы. Я думаю, что это должно быть либо вычислено, либо реактивно.

cSharp 17.05.2022 02:09

Она берет его у Пинии, у него реактивность Оллреда.

Mises 17.05.2022 02:26

Большое спасибо. .includes работает по назначению.

flourgirl 17.05.2022 02:44

Другие вопросы по теме