"reactive" doesn't work well with Array

[lixpng]

The reactive can't observe a Array, my code like this:

<template>
  <div>
    <button @click="handleAdd">Add count</button>
  </div>
</template>
<script>
import Vue from "vue";
import { setup, reactive, ref, watch } from "@vue/composition-api";

const observableArray = Vue.observable([{ value: 1 }]);

export default {
  setup() {
    const reactiveArray = reactive([{ value: 1 }]);
    const reactiveObject = reactive({ value: 1 });
    const refArray = ref([{ value: 1 }]);
    const reactiveDeepArray = reactive({parent: [{ value: 1 }]})

    watch(
      () => reactiveArray[0].value,
      val => {
        // I think this should be execute when I click the button every time,
        // but it doesn't
        console.log("reactiveArray changed", val);
      }
    );

    watch(
      () => reactiveObject.value,
      val => {
        // This will execute when I click the button every time
        console.log("reactiveObject changed", val);
      }
    );

    watch(
      () => refArray.value[0].value,
      val => {
        // This will execute when I click the button every time
        console.log("refArray changed", val);
      }
    );

    watch(
      () => observableArray[0].value,
      val => {
        // This will execute when I click the button every time
        console.log("observableArray changed", val);
      }
    );
    
    watch(
      () => reactiveDeepArray.parent[0].value,
      val => {
        // This will execute when I click the button every time
        console.log("reactiveDeepArray changed", val);
      }
    );

    function handleAdd() {
      reactiveArray[0].value++
      reactiveObject.value++
      refArray.value[0].value++
      observableArray[0].value++
      reactiveDeepArray.parent[0].value++
    }

    return {
      handleAdd
    };
  }
};
</script>

So, when I pass a Array to reactive, it won't be observed. But if the Array is wrapped by a object, it can be observed. I think it's a bug. If it's a feature, why?

[posva]

reactive should be used on an object, maybe there is a way to make the typing stricter but both object and Record allow setting an array so I don't know if there is another option apart from a runtime warning to help with this

[lixpng]

reactive should be used on an object, maybe there is a way to make the typing stricter but both object and Record allow setting an array so I don't know if there is another option apart from a runtime warning to help with this

But array is also an object, why can't use reactive just like Vue.observable?

[elpeyotl]

Just make in reactive an object whith an array in it. This works very well. Similiar to the data object in vue 2 before:

setup() {  
let items = reactive({
  list: [ //heres the object which has an array
    { title: "test1", id: 0 },
    { title: "test2", id: 1 },
    { title: "test3", id: 2 }
  ]
});
const deleteItem = childItem => {
  items.list = items.list.filter(item => item.id != childItem.id); //items.list will updated reactively
};
return { deleteItem, items, test };
}

[lixpng]

Just make in reactive an object whith an array in it. This works very well. Similiar to the data object in vue 2 before:

setup() {  
let items = reactive({
  list: [ //heres the object which has an array
    { title: "test1", id: 0 },
    { title: "test2", id: 1 },
    { title: "test3", id: 2 }
  ]
});
const deleteItem = childItem => {
  items.list = items.list.filter(item => item.id != childItem.id); //items.list will updated reactively
};
return { deleteItem, items, test };
}

I know this work, but I just want reactive a plain Array

[pikax]

I know this work, but I just want reactive a plain Array

That's literally the first second limitation on the readme.md.

[kimamula]

@pikax #502 seems just made the use of ref in a reactive array unnecessary. I still need the workaround (a reactive object with an array in it) and therefore the original issue has not been fixed yet.

[roo7cause]

Any updates on this? I am having issues with this, I have array prop that I set up as reactive in setup(). But once the prop changes, the reactive does not update.

const reactiveArrayProp = reactive(props.arrayProp)

Now, if props.arrayProp changes, the reactiveArrayProp won't trigger a change.

[mrts]

Any updates on this? I am having issues with this, I have array prop that I set up as reactive in setup(). But once the prop changes, the reactive does not update.

const reactiveArrayProp = reactive(props.arrayProp)

Now, if props.arrayProp changes, the reactiveArrayProp won't trigger a change.

Is there anything stopping you from using ref?

 const reactiveArrayProp = ref(props.arrayProp)

should work wonderfully as far as I can see, but maybe I'm missing something.

[yakubori]

For anyone still having issues, this worked for me a bit ago. In my case, I was working with some "columns"...

const columns = reactive({ cols: new Array() })

...

columns.cols.push({ title: 'Test' })

I assume something like this will work, too...

const columns = reactive(new Array())

...

columns.push({title: 'Test'})

[agm1984]

This doesn't this work either:

import { ref, computed, onMounted } from 'vue'

const arr = ref([])

const fetchData = async () => {
    const result = await axios.get('/api/data')
    arr.value = result.data
}

onMounted(fetchData)

const filteredArr = computed(() => {
    return arr.value.filter(some => some.value === 'thing')
})

The computed prop isnt triggered when arr changes.

I had to change it to this:

import { ref, computed, onMounted } from 'vue'

const data = ref({
    arr: [],
})

const fetchData = async () => {
    const result = await axios.get('/api/data')
    data.value.arr = result.data
}

onMounted(fetchData)

const filteredArr = computed(() => {
    return data.value.arr.filter(some => some.value === 'thing')
})