Changing Vue data based on method parameter

Question

I just started using Vue and I have a very simple issue that I just can't get to work! I'm trying to create a mounted event that runs a method with a specific parameter inside it to alter the "show" value of an element. here is the code:

export default {
    data(){
        return {
            one: false,
        }
    },
    methods: {
        show: function(el) {
            this.el = true;
        }
    },
    mounted(){
        this.show(this.one)
    }
}

I want "el" to be just a generic placeholder for whatever "data" name is passed into the method. in the future I may not only have "one" but also "two", "three" and "four". I want the "show" method to be able to take in any reference to one of these 4 options and change its value from false to true.

in the show method, I get the error "'el' is defined but never used." the only solution I've come to is to do an if method "if this.one === el{...}" but that kind of defeats the purpose. any help would be appreciated

but I want "el" to just be a placeholder for whatever data element is passed into the function. — Henry
– Henry, Commented Jun 18, 2019 at 11:30
Then why are you using this.el? Why do you want to use this? — zero298
– zero298, Commented Jun 18, 2019 at 11:31
because here, el is supposed to have the value, "this.one" which is a data that exists. I'm just trying to use a generic name to access any data variable and change its boolean value — Henry
– Henry, Commented Jun 18, 2019 at 11:34
You should be using a computed property for this instead: they are specifically designed for use cases like yours. — Terry
– Terry, Commented Jun 18, 2019 at 12:02

Bitpunk · Accepted Answer · 2020-08-12 13:40:40Z

1

You can do something like this:

export default {
  data(){
    return {
      one: false,
      two: false 
    }
  },
  methods: {
    doSomething(el) {
      this[el] = true;
    }
  },
  mounted(){
     //Also works with vue props!
    this.doSomething('one')
    this.doSomething('two')
  }
}

But if the function is more complex you should build a componet for that. Thats the vue way.

answered Aug 12, 2020 at 13:40

Bitpunk

2083 silver badges11 bronze badges

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

Comments

Krishnadas PC · Accepted Answer · 2019-06-18 11:55:52Z

0

new Vue({
  el: '#editor',
  data: {
    el: false,
    item : ''
  },
  computed: {
    
  },
  methods: {
    show (passedValue, item) {    
    this.item = item
      this.el = passedValue
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="editor">


<div id="div1" v-if="el===true && item =='div-1'" class="show">
div1 displayed
</div>
<div id="div-2" v-if="el===true && item =='div-2'" class="show">
div2 displayed
</div>
<button v-on:click="show(true, 'div-1')">show div1</button>
<button v-on:click="show(false, 'div-1')">hide div1</button>

<button v-on:click="show(true, 'div-2')">show div2</button>
<button v-on:click="show(false, 'div-2')">hide div2</button>
</div>

edited Jun 18, 2019 at 11:55

answered Jun 18, 2019 at 11:31

Krishnadas PC

6,5992 gold badges60 silver badges58 bronze badges

3 Comments

Henry Over a year ago

I tried show: function(el) { el = true; } but I get the error, 'el' is assigned a value but never used

Krishnadas PC Over a year ago

I do not understood your actual requirement but if you just wanted to show or hide something. Define elin data and call the show function with the value true or false as required. Inside the show function assign the passed value to this.el and you can chechk with an if condition in template whether to show or not.

Henry Over a year ago

in my data I want to have 10 diffent elements, all with the value "false". then, the show() method is supposed to pick one of these 10 elements based on the value that has been passed in the parameter. for example show(one) should change one: "false", to one: "true". I use "el" in my code as a generic placeholder for the element that will be changed based on the parameter that's passed into the method

Abhay Srivastav · Accepted Answer · 2019-06-18 11:57:53Z

0

export default {
data(){
    return {
        one: false,
    }
},
methods: {
    show(bol) {
        this.one = bol;
    }
},
mounted(){
    this.show(this.one)
}
}

Use above code it would work.

edited Jun 18, 2019 at 11:57

answered Jun 18, 2019 at 11:33

Abhay Srivastav

7726 silver badges16 bronze badges

1 Comment

Henry Over a year ago

thank you for the reply, but I want the show method to be more generic. so that if I have the data one: false, two: false, three: false, four: false, five: false, }, I can just point to any of them that I want at the time with a parameter.

Collectives™ on Stack Overflow

Changing Vue data based on method parameter

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related