VueJs dynamic buttons value

Question

So I'm looping through my allItems Array of Objects and I want to show something when a certain button is clicked.

allItems

allItems = [
   {
       title: 'test',
       show: false,
       description: 'this is test'
   },
   {
       title: 'test 1',
       show: false,
       description: 'the test 1'
   }
]

List.vue

v-col cols="3" v-for="item in allItems" :key="item.id">
      <v-card width="100%">

        <v-card-text>
          <span class="text--primary">
            <span class="title">{{ item.title.substring(0,28)+".." }}</span>
          </span>
        </v-card-text>

        <v-card-actions>
          <v-btn icon @click="item.show = !item.show">
            <v-icon>{{ item.show ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-if="item.show">
            <span class="pt-10">{{ item.description }}</span>
          </div>
        </v-expand-transition>
      </v-card>
 </v-col>

My problem is when the button is getting clicked its not opening the description.

EDIT

It looks like I didn't put much info. I'm using Vuex to handle my state.

PS: I'm not passing the computed value anymore to the child component.

in my List.vue script

import { mapActions, mapGetters } from "vuex";

export default {
data: () => ({}),
methods: {
  ...mapActions(["fetchItems"])
},
created() {
  this.fetchItems();
},
computed: mapGetters(["allItems"])
};

The code you posted is working fine when i reproduced. Where did you define allItems ? Is is inside component's data method? — Nafees Anwar
– Nafees Anwar, Commented Aug 26, 2019 at 15:36
@Priz I'd suggest checking where you are setting the props, as this code works perfect: codepen.io/Tiarhai/pen/QWLpzvQ — Gary Thomas
– Gary Thomas, Commented Aug 26, 2019 at 15:42
You must add to element v:bind attr . vuejs.org/v2/guide/components.html — dılo sürücü
– dılo sürücü, Commented Aug 26, 2019 at 15:43

tony19 · Accepted Answer · 2022-07-15 23:53:01Z

2

From your reply to the comments, I see you are passing your data as a prop and want it to be reactive. In Vue, all props form a one-way-down binding between the child property and the parent one.

So to reactively change the prop value, you can:

Set a data value which you will assign the props value to so that you can reactively change the state data instead.
You can aslo define a computed value from the prop and use the computed value instead

Comments

Tobias G. · Accepted Answer · 2019-08-26 21:40:00Z

0

As Onwuka wrote, don't modify the props directly in the child. I think what would make a lot of sense here is if you removed the show prop entirely from the items. Then you create a custom component e.g. ListItem.vue that contains your entire element and takes the item as a prop. Then each of these smaller components can keep track of its own state (visible/hidden) in the components data.

answered Aug 26, 2019 at 21:40

Tobias G.

3511 silver badge8 bronze badges

1 Comment

Tobias G. Over a year ago

The same remains true for vuex state. If you want to modify the state, you would need to commit these changes to the store by using this.$store.commit() to commit a mutation. Don't directly modify the state in your component.

Collectives™ on Stack Overflow

VueJs dynamic buttons value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related