我正在学习 Vue,所以我创建了单选按钮组件,但我正在努力解决如何删除这些值的问题。我当前的解决方案删除了实际值,但仍然显示选择。
这是组件
<template id="fradio">
<div>
<div class="field is-horizontal">
<div class="field-label" v-bind:class = "{ 'required' : required }">
<label
class = "label"
>{{label}}
</label>
</div>
<div class="field-body">
<div>
<div class="field is-narrow">
<p class="control" v-for="val in values">
<label class = "radio">
<input
type="radio"
v-bind:name = "name"
v-bind:id = "name"
@click = "updateValue(val)"
>
<span>{{val[valueLabel]}}</span>
<span v-if="!valueLabel">{{val}}</span>
</label>
<label class="radio">
<button class="delete is-small" @click="removeValue"></button>
</label>
<slot></slot>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true,
},
inputclass: {
type: String,
},
required: {
type: Boolean,
default: false,
},
valueLabel:{
type: String,
},
returnValue:{
type: String,
},
values:{},
name:'',
},
data() {
return {
};
},
methods: {
updateValue: function (value) {
var selectedValue;
(!this.returnValue) ? selectedValue = value : selectedValue = value[this.returnValue];
this.$emit('input', selectedValue)
},
removeValue: function() {
this.$emit('input',null);
},
},
}
</script>
这应该很容易,但我需要有人指出明显的...
最佳答案
更新:
我刚刚意识到你可能更关注数据而不是动态更新,这意味着你的问题可能是父组件中的数据没有被更新。您的大部分数据都作为 Prop 传递下来,因此我需要查看事件是如何在父组件中触发的,以帮助诊断问题所在。根据您提供的代码,您的 removeValue()
函数似乎正在发出一个事件,但我没有看到任何实际删除该值的代码。
我会检查父组件以确保它正在删除子组件,这应该可以解决您的问题!
初始答案:
通常,当从v-for
列表中删除一个项目时,您需要知道该项目的索引并使用Array.splice
来修改列表将其删除。
这是我脑海中的一个通用示例。
<template>
<ul>
<li v-for="(fruit, index) in fruits"
@click="removeItem(index)">
{{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Clementines']
}
},
methods: {
removeItem(index) {
this.fruits.splice(index, 1)
}
}
}
</script>
如果您有任何问题,请告诉我!
关于javascript - Vue.js 如何删除组件 v-for 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43794377/