Vue3 組合 api 道具值變化

Question

我正在嘗試用 vue 3 做一個手風琴組件，但比較情況對我來說似乎有點奇怪。

我正在嘗試在accordionitem中運行 function 即toggle操作，但無論我做了什么，我都無法更改道具值。 我哪里做錯了？

我想要做的是，當切換mutliple被點擊時，多個？ 沒有就會看他一眼，我想展示哪個是單身。 我在下面提到的鏈接中提供了示例，但我無法使用 vue 3 執行此操作

關聯

faq.vue

<template>
  <accordion id="hello" :content="exampleData1"></accordion>
  <accordion id="hellomultiple" :content="exampleData2" multiple="multiple"></accordion>
</template>
<script setup>
import Accordion from "@/components/Accordion.vue";

const exampleData1 = [
 {
  id: 1,
  active: false,
  title: 'Crushing Spirits',
  details: `
      <p>You can crush me but you can't crush my spirit! Are you crazy? I can't swallow that. Who's brave enough to fly into something we all keep calling a death sphere? It doesn't look so shiny to me.</p>
      <ul>
        <li>I just want to talk.</li>
        <li>It has nothing to do with mating.</li>
        <li>Fry, that doesn't make sense.</li>
      </ul>
    `
 },
 {
  id: 2,
  active: false,
  title: 'Soundtracks',
  details: `
      <p>Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
    `
 },
 {
  id: 3,
  active: false,
  title: `The Letter Shaped Like a Man Wearing a Hat`,
  details: `<p>And then the battle's not so bad? You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! Say it in Russian!</p>
      <p>Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
   `
 }
]
const exampleData2 = [
 {
  id: 1,
  active: false,
  title: 'Celebration',
  details: `
      <p>Come on, this is a Bluth family celebration. It's no place for children.</p>
    `
 },
 {
  id: 2,
  active: false,
  title: 'Lighter Fluid and Wine',
  details: `
      <p>But where did the lighter fluid come from? Wine only turns to alcohol if you let it sit. But anyhoo, can you believe that the only reason the club is going under is because it's in a terrifying neighborhood?</p>
    `
 },
 {
  id: 3,
  active: false,
  title: `What's in Oscar's box?`,
  details: `
      <p>In fact, it was a box of Oscar's legally obtained medical marijuana. Primo bud. Real sticky weed.</p>
      <p>Great, now I'm gonna smell to high heaven like a tuna melt!</p>
    `
 }
]
</script>

Accordion.vue

<template>
 <dl class="accordion box" role="presentation">
  <accordion-item
      v-for="item in content"
      :multiple="multiple"
      :item="item"
      :groupId="id"
      :key="item.id">
  </accordion-item>
 </dl>
</template>

<script setup>
import AccordionItem from "@/components/AccordionItem.vue";

const props = defineProps({
 content: {type: Array, required: true},
 multiple: {type: Boolean, required: false},
 id: {type: String, required: false}
})
</script>

AccordionItem.vue

<template>
 <div :id="groupId + '-' + item.id" class="accordion-item" :class="{'is-active': item.active}">
  <dt class="accordion-item-title">
   <button @click="toggle" class="accordion-item-trigger">
    <h4 class="accordion-item-title-text">{{ item.title }}</h4>
    <span class="accordion-item-trigger-icon"></span>
   </button>
  </dt>
  {{ item.active }}
  <transition
      name="accordion-item"
      @enter="startTransition"
      @after-enter="endTransition"
      @before-leave="startTransition"
      @after-leave="endTransition">
   <dd v-show="item.active" class="accordion-item-details">
    <div v-html="item.details" class="accordion-item-details-inner"></div>
   </dd>
  </transition>
 </div>

</template>

<script setup>
const props = defineProps({
 item: {type: Object, required: true},
 multiple: {type: Boolean, required: false},
 groupId: {type: String, required: false}
})

function toggle(event) {
 props.item.active = !props.item.active
}


function startTransition(el) {
 el.style.height = el.scrollHeight + 'px'
}

function endTransition(el) {
 el.style.height = ''
}
</script>

Answer 1

您需要使您的數組對ref或reactive具有反應性，然后像評論一樣，從子項發出事件並在父項中偵聽。 看看這里的演示

Answer 2

您不能更改聲明它們的組件中的道具。 你可以做什么：

1. 發射到父組件以更改值。
2. 將數據保存在商店中並從那里使用它而不是作為道具