javascript - Vue.js 如何删除组件 v-for 值

标签 javascript vue.js

我正在学习 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/

相关文章:

javascript - 一个 vue 实例中具有多个数据的类似组件

javascript - 如何更改 jQuery "easy pie chart"插件的配置参数?

javascript - 当中继器内未选中复选框时禁用文本框

javascript - 使用 jQuery 缩小文本搜索的选择范围

javascript - 如何在Vue.js中导出命名实例,停止使用: var app = this

javascript - 在 Vue 中声明变量有什么区别?

javascript - 输入键以在 javascript 中附加容器

javascript - 在 JavaScript Canvas 的 2D 上下文中使用多个 Canvas 来实现撤消/重做的缺点?

javascript - vuejs slick 不适用于 v-for

javascript - 过渡组动画在添加第三个元素时改变行为