[Vuejs]-How can I remove name value pair object from json array?

by

2👍

It looks like you’re trying to move all the items from selected to selectedColumns. You don’t really need to splice it from selected. Just clear it with this.selected = [] after you’ve copied the values:

this.selectedColumns.push(...this.selected)
this.selected = []

demo

👤tony19

1👍

From your vague comments, it sounds like you want the user to be able to pick individual elements from one array and move them into another.

To do so, you’d need to splice the item from the first array and push it to the other.

For example

const options = [{"key":"Company","text":"Company"},{"key":"FirstName","text":"First Name"},{"key":"Lastname","text":"Last Name"},{"key":"StreetAddress","text":"Street Address"},{"key":"City","text":"City"},{"key":"State","text":"State"},{"key":"zip","text":"Zip"}]

new Vue({
  el: "#app",
  data: () => ({
    options: [...options],
    selected: []
  }),
  methods: {
    select (index) {
      // remove and push
      this.selected.push(...this.options.splice(index, 1))
    }
  }
})
#app { display: flex; }
#app > div { flex: 1; }
.option { cursor: pointer; }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div>
    <p>Available</p>
    <ul>
      <li
        class="option" 
        v-for="(option, index) in options" 
        :key="option.key" 
        @click="select(index)"
      >
        {{ option.text }}
      </li>
    </ul>
  </div>
  <div>
    <p>Selected</p>
    <ul>
      <li v-for="option in selected">
        {{ option.text }}
      </li>
    </ul>
  </div>
</div>
👤Phil

Leave a comment