我的vue组件是这样的：
<template>
<div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Atletico
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Italy</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="italy" class="radio"> Juve
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="italy" class="radio"> Milan
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="italy" class="radio"> Inter
</label>
</div>
</li>
</ul>
</div>
<span id="result-select">Result</span>
</div>
</template>
<script>
export default {
props: ['...'],
...
}
</script>
我的javascript代码如下：
$('input[type="radio"]').click(function(){
var $radio = $(this);
var name = $(this).prop("name");
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
$('#result-select').text('');
}
else{
$radio.data('waschecked', true);
$(`input[name=${name}]:not(:checked)`).data('waschecked', false);
$('#result-select').text(txt);
}
let output = [];
var txt;
$('input[type="radio"]:checked').each( function() {
txt = $(this).parent().text();
output.push(txt);
});
$('#result-select').text(output.join(' - '));
});
我仍然使用javascript来统一每个选定的单选按钮组。这个javascript代码工作正常。但是我想用vue组件来改变它。所以没有javascript代码。但我仍然感到困惑
我先解释一下情节
我想：
如果我选择chelsea，madrid和juve结果如下：
切尔西 - 马德里 - 尤文
如果我选择chelsea和madrid结果如下：
切尔西 - 马德里
因此，如果我选中单选按钮，它会显示文本。如果我取消选中单选按钮，则不会显示文本
如何在vue组件中执行此操作？
更新：
可以取消选中单选按钮
例如：
如果我选择chelsea，madrid和juve结果如下：
切尔西 - 马德里 - 尤文
然后我取消选中madrid，结果如下：
切尔西 - 尤文
答案 0 :(得分：2)
每当您需要基于其他值的值时，您应该考虑使用computed。在这种情况下，计算通过国家数据并选出所选城市名称并将其作为列表返回。
computed: {
selecteds() {
return this.countries
.map(c => c.selected)
.filter(s => s);
}
},
由v-model on the radio inputs提供检查和取消选中功能。如果绑定到v-model的值的值与绑定到value的值匹配，则检查该按钮;如果不是，不是。
我使用settable computed来处理您点击已经点击的按钮的情况。如果已选中，则将值设置为null以取消选择它。因为我在一个组件中，“将值设置为null”是通过发出父用于设置值的事件来完成的。
computed: {
proxySelected: {
get() {
return this.data.selected;
},
set(newValue) {
this.$emit('update', this.data.name, this.data.selected === newValue ? null : newValue);
}
}
}
function countryData(name, cities) {
return {
name,
cities,
selected: null
};
}
new Vue({
el: '#app',
data: {
countries: [
countryData('England', ['Chelsea', 'MU', 'Arsenal']),
countryData('Spain', ['Madrid', 'Barcelona', 'Atletico']),
countryData('Italy', ['Juve', 'Milan', 'Inter'])
]
},
computed: {
selecteds() {
return this.countries
.map(c => c.selected)
.filter(s => s);
}
},
methods: {
update(countryName, newSelectedValue) {
this.countries.find(c => c.name === countryName).selected = newSelectedValue;
}
},
components: {
country: {
template: '#country-template',
props: ['data'],
data() {
return {
checked: []
};
},
computed: {
proxySelected: {
get() {
return this.data.selected;
},
set(newValue) {
this.$emit('update', this.data.name, this.data.selected === newValue ? null : newValue);
}
}
}
}
}
});.list-unstyled {
list-style: none;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<country v-for="country in countries" :data="country" @update="update" :key="country.name"></country>
<div>{{selecteds.join(' - ')}}</div>
</div>
<template id="country-template">
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>{{data.name}}</strong></li>
<li v-for="city in data.cities">
<div class="checkbox">
<label>
<input type="radio" :name="data.name" class="radio" :value="city" v-model="proxySelected">
{{city}}
</label>
</div>
</li>
</ul>
</div>
</template>
答案 1 :(得分：0)
Use v-model to do this:
<input type="checkbox" v-model="italy">
And add vue will create an array for italy which you can output in your vue template like {{ italy.join(' - ') }}