I'm working with BootstrapVue. I have a b-button in my template where I want to switch its text after clicking on it.

I'm passing my generated unique item.id to my script, but this is not working out in the case that every b-button text will be changed and not only the one I'm clicking. What is the problem in here?

You should be able to copy, paste the code and it should work out.

Please notice that it's just a replica of my code shortened on needed code, so the code should not be changed this much.

My template:

<div v-for="item in inputs" :key="item.id">
  <b-button @click="changeText(item)">{{btnText}}</b-button>
</div>

<b-button @click="addInput">Add Input</b-button>

My script:

data() {
  return {
    collapsed: [true],
    id: null,
    inputs: [{id: 0}],
    btnText: "It's false",
  }
},

methods: {
  changeText(item) {
    this.collapsed[item.id] = !this.collapsed[item.id]

    if(this.collapsed[item.id] === true) {
      this.btnText = "It's true"
    }
    else if(this.collapsed[item.id] === false) {
      this.btnText = "It's false"
    }
  },

  addInput() {
    this.inputs.push({
      id: this.id  = 1, 
    })
    this.collapsed.push(true);

  }
}

CodePudding user response：

You can maintain an object for btnText like

data() {
  return {
    collapsed: [false],
    id: null,
    inputs: [{id: 0}],
    btnText: {0: "It's false"} //Change added
  }
},

methods: {
  changeText(item) {
    this.collapsed[item.id] = !this.collapsed[item.id]

    if(this.collapsed[item.id] === true) {
      this.btnText[item.id] = "It's true"; //Change added
    }
    else if(this.collapsed[item.id] === false) {
      this.btnText[item.id] = "It's false"; //Change added
    }
  },

  addInput() {
    this.inputs.push({
      id: this.inputs.length, // Change added
    })
    this.btnText[this.inputs.length] = 'It's false';  //Change added
    this.collapsed.push(true);

  }
}

and your template should be like

<div v-for="item in inputs" :key="item.id">
  <b-button @click="changeText(item)">{{btnText[item.id]}}</b-button> <!-- Change added -->
</div>

<b-button @click="addInput">Add Input</b-button>

CodePudding user response：

1. Instead of having separate arrays to store the different fields, move them into the inputs[] object array, so that each item in the v-for has its own id, collapsed, and btnText.

2. Then update changeText() to refer to the fields within the item argument.

3. Also update the template to use the item.btnText field.

<script>
export default {
  data() {
    return {
      inputs: [{ id: 0, collapsed: true, btnText: `It's true` }], 1️⃣
    }
  },
  methods: {
    changeText(item) {
      item.collapsed = !item.collapsed 2️⃣

      if (item.collapsed) {
        item.btnText = `It's true`
      } else {
        item.btnText = `It's false`
      }
    },
    addInput() {
      this.inputs.push({ 1️⃣
        id: this.id  ,
        collapsed: true,
        btnText: `It's true`,
      })
    },
  },
}
</script>

<template>
  <div>
    <div v-for="item in inputs" :key="item.id">   3️⃣
      <b-button @click="changeText(item)">{{ item.btnText }}</b-button>
    </div>

    <b-button @click="addInput">Add Input</b-button>
  </div>
</template>

demo