Reactivity on props Vue.js

Question

I am in the beginning of learning Vue, and having a hard time understanding how to define props etc. using the composition API.

I have a component (ACE Editor), loaded like this:

<v-ace-editor
    v-model:value="currentRecord.text"
/>

The v-ace-editor needs to have the model and value loaded like this: v-model:value .

import {computed, ref} from 'vue';
import collect from "collect.js"

const props = defineProps({
    records: {
        type: Object,
    },
})

//Get all records.
let getRecords = () => {
    return collect(props.records)
}

//Filter the records using "collect.js"
const getUnlabeledRecords = () => {
    return getRecords()
        .where('skipped', false)
        .where('processed', false);
}

//Assign all unlabeled records on the first load.
let allRecords = ref(getUnlabeledRecords());

//In order to check if "text" is empty - and if not, set a default value, load the first record into a temp. variable.
let first = allRecords.value.first();
if(first){
    first.text ??= "";
}

//Load the current record into a ref.
let current = ref(first);

//Finally, compute it.
let currentRecord = computed(() => current.value)

Looking at this, and coming from a backend background, it feels very bloated.

I have tried the following:

let allRecords = ref(getUnlabeledRecords());
let currentRecord = computed(() => allRecords.value.first())

But doing this leads to me not being able to interact with the currentRecord - nor change the allRecords . This means that if for example currentRecord.text is null from the backend, my ace-editor component fails because it expects a value.

Is there another way to load in these variables?

Answer 1

You actually don't have to called .value of a ref when using it in the template. So you can actually remove the computed part (last line of your ) and change your template to.

<v-ace-editor
    v-model="current.text"
/>

Now, assuming you managed v-model correctly in v-ace-editor (if this is your own component), you should have reactivity kept when modifiying current.text from v-ace-editor.

As a side note, computed properties are read-only. You cannot expect a child component to modify its value by passing it with v-model.

However, you should note that updating records prop from parent component will not update current . For this, maybe you want to add a watcher on records .

Also, personal suggestion, but if you only really care about currentRecord in your component and not all records, maybe you should do the filtering from parent component and only pass currentRecord as a prop. Other personal suggestion, you can declare all your variables in your script with const instead of let . const prevent reassignation, but since you work with refs, you never reassign it, but you change its value property.