How to pass a selected key to a function and set a value for it using Vue.js?

Question

I tried to pass a selected key to a function and set a value for it. Already Vue data has the key(htxt) and I passed the key on edit button event and get the passed key and tried to set prompt dialog's value to it but it's not working.

<html>
    <head>
        <title>Vue.js Table Edit</title>
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

        <!-- UIkit JS -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
    </head>
    <body>
        <div id="Edit">
            <h3>{{ htxt }}<span uk-icon="icon: pencil" @click="onEdit('htxt')"></span></h3>
            <span>{{ stxt }}<span uk-icon="icon: pencil" @click="onEdit('stxt')"></span></span>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var edits = new Vue({
                el: '#Edit',
                data: {
                    htxt: 'How to change h3 text?',
                    stxt: 'How to change span text?'
                },
                methods:{
                    onEdit: function(val){
                        console.log("passed val:",val)
                        var retVal = prompt("Enter your name : ", "your name here");
                        this.htxt = retVal;
                        // I passed key to hold the value in onedit function and 
                        // I tried to set value to that key like this.val = retVal
                    }
                }
                
            })
        </script>
    </body>
</html>

ebyte · Accepted Answer · 2020-02-16 06:04:57Z

1

<html>
    <head>
        <title>Vue.js Table Edit</title>
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

        <!-- UIkit JS -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
    </head>
    <body>
        <div id="Edit">
            <h3>{{ htxt }}<span uk-icon="icon: pencil" @click="onEdit('htxt')"></span></h3>
            <span>{{ stxt }}<span uk-icon="icon: pencil" @click="onEdit('stxt')"></span></span>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var edits = new Vue({
                el: '#Edit',
                data: {
                    htxt: 'How to change h3 text?',
                    stxt: 'How to change span text?'
                },
                methods:{
                    onEdit: function(val){
                        console.log("passed val:",val)
                        var retVal = prompt("Enter your name : ", "your name here");
                        this[val] = retVal;
                        // I passed key to hold the value in onedit function and 
                        // I tried to set value to that key like this.val = retVal
                    }
                }
                
            })
        </script>
    </body>
</html>

var data =  {
  htxt: 'How to change h3 text?',
  stxt: 'How to change span text?'
}

// ok
console.log(data['htxt'])
console.log(data.htxt)

// error, You are using this method
// console.log(data.'htxt')

edited Feb 16, 2020 at 6:04

answered Feb 16, 2020 at 3:35

ebyte

1,5173 gold badges22 silver badges36 bronze badges

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

3 Comments

SagitSri Over a year ago

Thank you so much you made my day... Can you explain me what I did wrong?

ebyte Over a year ago

@SagitSri I added instructions

ebyte Over a year ago

val is a string

Collectives™ on Stack Overflow

How to pass a selected key to a function and set a value for it using Vue.js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related