Why is vue v-model not working for an array prop?

Question

I have a custom component that takes the modelValue prop and emits the update:modelValue event. In the parent component I pass an array:

TestComponent.vue

<template>
  <div>
     <button @click="updateIt">Test</button>
  </div>
</template>

<script>
export default {
    props: {
       modelValue: Array
    },
    emits: ["update:modelValue"],
    setup(props, {emit}){
        return {
            updateIt(){
                emit("update:modelValue", [4,5,6])
            }
        }
    }
}
</script>

App.vue

<template>
  <div>
     <test-component v-model="myArr"/>
     <ul>
         <li v-for="i in myArr" v-text="i"></li>
     </ul>
  </div>
</template>

<script>
import TestComponent from "./TestComponent.vue";

export default {
    components: {
        TestComponent
    },
    setup(props, {emit}){
        const myArr = reactive([1,2,3]);

        return {
            myArr
        }
    }
}
</script>

The list will not get updated when I press the button, why?

CodingKiwi · Accepted Answer · 2021-11-25 19:18:01Z

Internally, the v-model directive gets changed to a handler function for the update:modelValue event that looks something like this:

$event => ((exp => $event) where exp is the expression in the directive

which basically means, when the update:modelValue event is emitted, the value you emit is assigned directly to the myArr variable, effectively replacing the whole reactive variable without triggering the reactivity chain, because it does not happen through the proxy.

If myArr would be a ref([]) vue detects it and the handler function looks something like this:

$event => (exp ? (exp).value = $event : null) where exp is the expression in the directive

which means that the value gets assigned through the ref proxy, triggering the reactivity chain.

But there is no internal logic that checks if the passed expression is an array and if so, does some splice push magic to keep the original variable, you have to do that yourself.

Possible Solutions:

1) use an object key:

 <test-component v-model="myArr.data"/>

 ...

 const myArr = reactive({
    data: [1,2,3]
 });

2) use a ref:

 <test-component v-model="myArr"/>

 ...

 const myArr = ref([1,2,3]);

3) use a custom handler function:

 <test-component :modelValue="myArr" @update:modelValue="onChange"/>

 ...

 const myArr = reactive([1,2,3]);

 function onChange(newval){
   myArr.splice(0, myArr.length, ...newval);
 }

brimman · Accepted Answer · 2022-07-21 16:52:05Z

1

For Options API

I had the same problem using options API and came by this solution.

The main problem is with the proxy object that is being passed to parent component when emitting the event.

So make sure to pass plain array using this technique:

this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.tags)));

In this code sample, the tags is the array that is being updated and pushed new value into that I want to be also reflected in the model provided by parent component.

Note: Theoretically this solution also works for Composition API but I haven't tested it with Composition API.

edited Jul 21, 2022 at 16:52

answered Jul 21, 2022 at 16:05

brimman

192 bronze badges

Collectives™ on Stack Overflow

Why is vue v-model not working for an array prop?

2 Answers 2

Possible Solutions:

1) use an object key:

2) use a ref:

3) use a custom handler function:

Comments

For Options API

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Possible Solutions:

1) use an object key:

2) use a ref:

3) use a custom handler function:

Comments

For Options API

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related