我有这个简单的<input>
无线电用户选择。
<sample>
<ul>
<li each={ techs }>
<input
type='radio'
name='dev_choice'
value={ name }
onclick={ check_choice }>
{ name }
</input>
</li>
</ul>
<button onclick={ check_selection }>Check</button>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML', rank: '10' },
{ name: 'JavaScript', rank: '20' },
{ name: 'CSS', rank: '30' }
]
check_choice(e) {
// This is working fine
console.log(e.item.rank)
}
check_selection(e) {
// How do I get the rank of my selected item ??
// None of the below is working
console.log(this.dev_choice)
var choice = $("input[name='dev_choice']:checked")
console.log(choice)
}
</script>
</sample>
RiotJs似乎将用于创建循环的对象绑定到html对象。但是,我没有看到任何方法从另一个函数访问此对象。 任何线索都会受到欢迎!
更一般地说,如何从this.techs
访问$('sample')
?
答案 0 :(得分:2)
选择选项时,使用select_tech变量获取引用。
<sample>
<h2>{ message }</h2>
<ul>
<li each={ techs }>
<input
type='radio'
name='dev_choice'
value={ name }
onclick={ check_choice }>
{ name }
</input>
</li>
</ul>
<button onclick={ check_selection }>Check</button>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML', rank: '10' },
{ name: 'JavaScript', rank: '20' },
{ name: 'CSS', rank: '30' }
]
this.selected_tech = {}
check_choice(e) {
this.selected_tech = e.item
}
check_selection(e) {
console.log(this.selected_tech.rank)
}
</script>
</sample>
答案 1 :(得分:2)
我正在使用闭包来解决这类问题
<sample>
<h2>{ message }</h2>
<ul>
<li each={ techs }>
<input
type='radio'
name='dev_choice'
value={ name }
checked={currentRank === rank}
onclick={ check_choice(rank) }>
{ name }
</input>
</li>
</ul>
<button onclick={ check_selection }>Check</button>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML', rank: '10' },
{ name: 'JavaScript', rank: '20' },
{ name: 'CSS', rank: '30' }
]
// Use this line if you want no radio checked
// this.currentRank = void 0
// Use this line if you want a default value
this.currentRank = '30'
check_choice(rank) {
return () => {
this.currentRank = rank
}
}
check_selection() {
alert(this.currentRank)
}
</script>
</sample>
答案 2 :(得分:1)
我添加了一个属性,但这看起来很混乱: http://plnkr.co/edit/s1n5EGzrODTw8vCEtWIv?p=preview
<sample>
<h2>{ message }</h2>
<ul>
<li each={ techs }>
<input
type='radio'
name='dev_choice'
value={ name }
data-rank={rank}
onclick={ check_choice }>
{ name }
</input>
</li>
</ul>
<button onclick={ check_selection }>Check</button>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML', rank: '10' },
{ name: 'JavaScript', rank: '20' },
{ name: 'CSS', rank: '30' }
]
check_selection(e) {
alert($("input[name='dev_choice']:checked").attr('data-rank'))
}
</script>
</sample>
答案 3 :(得分:1)
您只需使用javascript即可找到所选内容,请检查我的前叉示例http://plnkr.co/edit/lgw4TwfJWF5sAEUN4M3s?p=preview
<sample>
<h2>{ message }</h2>
<p>Check your console!</p>
<ul>
<li each={ techs }>
<input
type='radio'
name='dev_choice'
value={ name }
onclick={ check_choice }>
{ name }
</input>
</li>
</ul>
<button onclick={ check_selection }>Check</button>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML', rank: '10' },
{ name: 'JavaScript', rank: '20' },
{ name: 'CSS', rank: '30' }
]
check_choice(e) {
console.log(e.item.rank)
}
check_selection(e) {
const input = this.dev_choice.find(input => input.checked)
if (input) console.log(input, input.value)
}
</script>
</sample>
答案 4 :(得分:0)
我100%确定你想要什么,但我解释你想要获得所选对象的技术的完整对象(具有名称和等级)。如果是这样,我将做的是Plnkr)
基本上我添加一个var来获取所选项目以供以后访问。
var selectedTech = null
check_choice(e) {
selectedTech = e.item
}
check_selection(e) {
alert(JSON.stringify(selectedTech))
}
其他一切都是一样的。
希望这有帮助。