Change text on dynamically created buttons with vue

Question

I´m working with a group of dynamically created buttons in vue. My code creates a button for every object in an array and sets the buttons id to the id of the object. Now I have an other array of objects which contains the texts every button should have according to its id. I can´t figure out how to match the names with the id.

Thanks for your help!

            <b-row class="main-buttongroup-row1">
              <b-col
                lg="4"
                class="btn"
                v-for="Sub in Main[0].subs"
                :key="Sub.id"
              >
                <b-button
                  v-model="optionsButton"
                  :id="Sub.id"
                  @click="submit(Sub.id)"
                  >{{ optionsButton.text }}</b-button
                >
              </b-col>
            </b-row>

This is what my array "Main" looks like:

var Main = [
{
   id:3
   num: 3
   scale: 100
   subs: [
       { id: 5, count:2 }
       { id: 1, count:1 }
       { id: 2, count:2 }]
}]

This is the array with the text which needs to be matched:

  data() {
    return {
      showAlert: false,
      optionsButton: [
        { text: "text1", value: 1 },
        { text: "text2", value: 2 },
        { text: "text3", value: 3 },
        { text: "text4", value: 4 },
        { text: "text5", value: 5 },
        { text: "text6", value: 6 }
      ],
    };
  }

Stark Buttowski · Accepted Answer · 2020-07-08 06:35:24Z

1

You can use a method to do this for you which will take the id and return the text.

Template

<b-row class="main-buttongroup-row1">
   <b-col lg="4" class="btn" v-for="Sub in Main[0].subs" :key="Sub.id">
      <b-button v-model="optionsButton" :id="Sub.id" @click="submit(Sub.id)">{{ getButtonText(Sub.id) }}</b-button>
   </b-col>
</b-row>

.Vue

data() {
  return {
    showAlert: false,
    optionsButton: [
      { text: "text1", value: 1 },
      { text: "text2", value: 2 },
      { text: "text3", value: 3 },
      { text: "text4", value: 4 },
      { text: "text5", value: 5 },
      { text: "text6", value: 6 }
    ],
    methods: {
      getButtonText(id) {
        return this.optionsButton.filter(opts => opts.value === id)[0].text
      }
    }
  };
}

answered Jul 8, 2020 at 6:35

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change text on dynamically created buttons with vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related