Vue.js how to delete component v-for values

Question

I am learning Vue, so I created radio button component, but I am struggling with how can one delete these values. My current solution deletes actual values, but selection is still displayed.

This is the component

<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>

It should be easy, but I need someone to point out the obvious...

It is probably easier if you can create a proof-of-concept example (like in the form of an MCVE)—shouldn't be too difficult since you've already gotten the code in your question already. My question is, what does "delete these values" mean? Where are these values being sent to? — Terry
– Terry, Commented May 5, 2017 at 0:00
Parent component calls it like this... <fradio v-model.trim = "formdata.first_name" label = "First name" name="first_name" placeholder="First name" type="text" :required="true" :expanded="true" inputclass="" :loading="false"> </fradio> What I mean is that sometimes you want to deselect all the options in radio button. How to do that is the struggle — rpz
– rpz, Commented May 5, 2017 at 0:36

bencodezen · Accepted Answer · 2017-05-05 03:23:35Z

1

Update:

I just realized that you may be more focused on the data not dynamically updating, which means that your issue might be that the data in the parent component is not being updated. Most of your data is being passed down as props, so I'd need to see how the event is being fired in the parent component in order to help diagnose what's wrong. Based on the code you provided, it looks like your removeValue() function is emitting an event but I don't see any code that actually removes the value.

I would check the parent component to make sure that it is removing the child component and that should fix your problem!

Initial Answer:

Generally, when removing an item from a v-for list, you need to know the index of the item and use the Array.splice in order to modify the list to remove it.

Here's a generic example off the top of my head.

<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>

Let me know if you have any questions!

edited May 5, 2017 at 3:23

answered May 5, 2017 at 0:28

bencodezen

1,0631 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rpz Over a year ago

You are right. Problem is that parent component is not updated

bencodezen Over a year ago

@rpz Great! If the problem is solved, could you mark the question as answered? It would be helpful for people going forward. Best of luck on the rest of your project!

rpz Over a year ago

Hi. Problem is not yet solved. You did said it better as it was problem with parent component updating. I am still searching internet to understand how to reset radio button values. So the situation is: I create radio buttons from array. I will set value of one of those radio buttons. How can I reset the button values to be unchecked?

bencodezen Over a year ago

@rpz As far as resetting the radio button values, I'm going to assume the scenario is that when something is deleted, I would remove the "checked" attribute from the radio button that is selected. You can track that via a data property or you can simply use JS to target the radio button within that group that has a checked value since only one can have it. Let me know if you have any other questions!

rpz Over a year ago

The simple is always hidden :) I added the v-model to child v-for loop. Added delete button and via that user has now option to deselect. But I am very thankful for help @BenCodeZen, he directed me to solution.

Collectives™ on Stack Overflow

Vue.js how to delete component v-for values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related