gpt4 book ai didi

javascript - 如何使用 Vue.js 将选定的键传递给函数并为其设置值?

转载 作者:行者123 更新时间:2023-12-02 21:46:05 26 4
gpt4 key购买 nike

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/uikit@3.3.1/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/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>

最佳答案

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

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/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')

关于javascript - 如何使用 Vue.js 将选定的键传递给函数并为其设置值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60245149/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com