javascript - 如何使用 Vue.js 将选定的键传递给函数并为其设置值?
问题描述
我试图将选定的键传递给函数并为其设置一个值。Vue 数据已经有密钥(htxt),我在编辑按钮事件中传递了密钥并获取传递的密钥并尝试为其设置提示对话框的值,但它不起作用。
<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')
推荐阅读
- c++ - 混合 CRTP 还是纯虚函数?
- azure-logic-apps - 如何格式化正文以将输入数据集作为 Azure ML 中的参数传递?
- c# - CommonOpenFileDialog - 从 UI 线程调用后跨线程操作无效
- python - 如何避免matplotlib hist中条之间的不同间隙?
- excel - 在 Image 控件上显示来自文件路径的图片
- django - [标签:芹菜 [连接重置错误,由于“与代理的连接”丢失或无法接收确认
- python - Python-将文件夹中的.png图像转换为视频
- html - CSS display none mobile 和 tablet 显示在同一个查询中
- c# - 基于身份验证 mvc core 3.1.9 显示或隐藏某些 html 元素
- node.js - MERN应用支付成功后如何跳转到下一页?