Une variable isOpen dans une boucle v-for

[sbillois]

Bonjour,
Je suis sur un projet vue.js, qui a pour but d’afficher des données qui viennent d’une API (JSON).

Mon JSON est soius cette forme :
{
message: ‘Mon message’,
date: maDateIci,
details: { text:‘monTexte’, url:‘https://…’ }
}

Mon code:

<div v-for="item, key, isOpen=false in allItems">
    <p>{{item.message}}</p>
    <p @click="isOpen=!isOpen" v-shox="!isOpen">Voir plus</p>
    <div v-shox="isOpen">
        <p>{{item.details}}</p>
    </div>
</div>

La div contenant les détails ne s’affiche que si isOpen===true. Donc ça, c’est ok, mais le changement de la variable au clique ne ne fonctionne pas.

Pouvez-vous m’aider ?

Edit:
J’ai mis un bout de code ici qui représente ce que je veux faire :
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmNvbnN0IGRhdGEgPSByZWYoW1xuICB7XG4gICAgbWVzc2FnZTonUmVkdWNlIHVudXNlZCBKYXZhU2NyaXB0JywgXG4gICAgc2NvcmU6MS4wOCwgXG4gICAgZGV0YWlsczoge1xuICAgICAgdGV4dDogXCJMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBTZWQgbm9uIHJpc3VzLiBTdXNwZW5kaXNzZSBsZWN0dXMgdG9ydG9yLCBkaWduaXNzaW0gc2l0IGFtZXQsIGFkaXBpc2NpbmcgbmVjLCB1bHRyaWNpZXMgc2VkLCBkb2xvci4gQ3JhcyBlbGVtZW50dW0gdWx0cmljZXMgZGlhbS4gTWFlY2VuYXMgbGlndWxhIG1hc3NhLCB2YXJpdXMgYSwgc2VtcGVyIGNvbmd1ZSwgZXVpc21vZCBub24sIG1pLiBcIixcbiAgICAgIHVybDoge1xuICAgICAgICB1cmw6IFwiaHR0cHM6Ly93d3cuZ3N0YXRpYy5jb20vcmVjYXB0Y2hhL3JlbGVhc2VzL2daV0xoRVVFSkZ4RWhvVDVocGpuMnhISy9yZWNhcHRjaGFfX2VuLmpzXCIsXG4gICAgICAgIHNpemU6IDE0Mi4xLFxuICAgICAgICBwb3RlbnRpYWxTYXZpbmdzOiA2NS43XG4gICAgICB9XG4gICAgfVxuICB9LFxuICB7XG4gICAgbWVzc2FnZTonU2VydmUgaW1hZ2VzIGluIG5leHQtZ2VuIGZvcm1hdHMnLCBcbiAgICBzY29yZTowLjIxLCBcbiAgICBkZXRhaWxzOiB7XG4gICAgICB0ZXh0OiBcIkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIFNlZCBub24gcmlzdXMuIFN1c3BlbmRpc3NlIGxlY3R1cyB0b3J0b3IsIGRpZ25pc3NpbSBzaXQgYW1ldCwgYWRpcGlzY2luZyBuZWMsIHVsdHJpY2llcyBzZWQsIGRvbG9yLiBDcmFzIGVsZW1lbnR1bSB1bHRyaWNlcyBkaWFtLiBNYWVjZW5hcyBsaWd1bGEgbWFzc2EsIHZhcml1cyBhLCBzZW1wZXIgY29uZ3VlLCBldWlzbW9kIG5vbiwgbWkuIFwiLFxuICAgICAgdXJsOiB7XG4gICAgICAgIHVybDogXCJodHRwczovL3d3dy5vcGVuc3R1ZGlvLmZyL2FwcC9wbHVnaW5zL2thdGV4L2Fzc2V0cy9rYXRleC0wLjEzLjEzL2thdGV4Lm1pbi5qcz92ZXI9NS45LjJcIixcbiAgICAgICAgc2l6ZTogNzEuMSxcbiAgICAgICAgcG90ZW50aWFsU2F2aW5nczogMzEuN1xuICAgICAgfVxuICAgIH1cbiAgfSxcbiAgXSk7XG5jb25zdCBtc2cgPSByZWYoJ1VuZSB2YXJpYWJsZSBpc09wZW4gZGFucyB1bmUgYm91Y2xlIHYtZm9yJylcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX0gPC9oMT5cbiAgPGRpdiB2LWZvcj1cIml0ZW0sIGtleSwgaXNPcGVuPWZhbHNlIGluIGRhdGFcIiAgPlxuICAgIDxkaXY+XG4gICAgICA8cD4ge3trZXl9fSB8IHt7aXRlbS5tZXNzYWdlfX08L3A+XG4gICAgPC9kaXY+XG4gICAgPHAgQGNsaWNrPVwiaXNPcGVuPSFpc09wZW5cIiA+XG4gICAgICBWb2lyIHBsdXNcbiAgICA8L3A+XG4gICAgPGRpdiB2LXNob3c9XCJpc09wZW5cIiA+XG4gICAgICA8cD5cbiAgICAgICAge3tpdGVtLmRldGFpbHMudGV4dH19XG4gICAgICA8L3A+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

[matxx]

Salut,

on dirait qu’on ne peut pas déclarer de variable reactive comme ça dans le v-for

Tu peux :

• créer un autre composant (avec un setup const isOpen = ref(false)) et qui sera démultiplié par le v-for
• ou créer un object (ID du message => boolean) dans ton composant actuel :
  Vue SFC Playground

[sbillois]

Merci beaucoup pour ton aide matxx

Avec des composants, ça fonctionne impécable

[matxx]

pense à passer le post en résolu