In Vue.js 3 (beta), I have defined an array using reactive, as I want to bind its contents to some UI controls in a loop. So far, this works and everything is fine.

Now, I need to update a value within this array, which means I need to run a find or a findIndex on this array. Since the array is being proxied by Vue.js, this doesn't work as expected: The proxy is just not a simple plain old array.

What I did is get a copy using toRaw, run findIndex on that one, and then update the original array using the index. This works, but of course it doesn't seem to be very elegant.

Is there a better way to approach this?

PS: It's fine if it's a solution that only works in Vue 3, I don't care about the 2.x series.

In Vue.js 3 (beta), I have defined an array using reactive, as I want to bind its contents to some UI controls in a loop. So far, this works and everything is fine.

Now, I need to update a value within this array, which means I need to run a find or a findIndex on this array. Since the array is being proxied by Vue.js, this doesn't work as expected: The proxy is just not a simple plain old array.

What I did is get a copy using toRaw, run findIndex on that one, and then update the original array using the index. This works, but of course it doesn't seem to be very elegant.

Is there a better way to approach this?

PS: It's fine if it's a solution that only works in Vue 3, I don't care about the 2.x series.

• javascript
• arrays
• vue.js
• vuejs3

Share Improve this question Follow edited Aug 17, 2020 at 2:56 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Aug 16, 2020 at 20:50 Golo RodenGolo Roden 151k102102 gold badges315315 silver badges444444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

All the array's methods are still accessible through the Proxy, so you can still use find or findIndex on it:

import { reactive } from 'vue'

const items = reactive([1,2,3])

console.log(items.find(x => x % 2 === 0))
console.log(items.findIndex(x => x % 2 === 0))

const MyApp = {
  setup() {
    const items = Vue.reactive([1,2,3])
    
    return {
      items,
      addItem() {
        items.push(items.length + 1)
      },
      logFirstEvenValue() {
        console.log(items.find(x => x % 2 === 0))
      },
      logFirstEvenIndex() {
        console.log(items.findIndex(x => x % 2 === 0))
      },
      incrementItems() {
        for (let i = 0; i < items.length; i++) {
          items[i]++
        }
      }
    }
  }
}

Vue.createApp(MyApp).mount('#app')

<script src="https://unpkg./[email protected]"></script>
<div id="app">
  <button @click="logFirstEvenValue">Log first even item</button>
  <button @click="logFirstEvenIndex">Log index of first even item</button>
  <button @click="incrementItems">Increment items</button>
  <button @click="addItem">Add item</button>
  <ul>
    <li v-for="item in items">{{item}}</li>
  </ul>
</div>