Quasar Select reacting to user input with Composition API

I’m have an application where my vue component has a Select control which users can select multiple items within it. I want this property to update based on what the user selects in the dropdown. However I continue to get this error when trying to set it up

[Vue warn]: Write operation failed: computed value is readonly.

The select is used as an input so users can add or remove multiple email addresses Here are the trimmed down versions of the code showing the important bits…

index.vue

<template>
  <q-page class="q-pa-lg justify-evenly">
      <q-select
        stack-label
        clearable
        filled
        use-input
        use-chips
        multiple
        hide-dropdown-icon
        input-debounce="0"
        new-value-mode="add-unique"
        v-model="taskRecipients"
      >
      </q-select>

  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api';
import { Notify } from 'quasar';

export default defineComponent({
  name: 'PageIndex',
  components: {},
  setup(props, { root }) {
    const taskRecipients = computed(() => root.$store.getters['app/taskRecipients']);

    return {
      taskRecipients,
    };
  }
});
</script>

Answer

Try to make the computed property writable by adding a setter :

const taskRecipients = computed({

   get:() => root.$store.getters['app/taskRecipients'],

  set:(val)=>{
     root.$store.dispatch('changeTaskRecipients', val) // run the action that updates the state

  }

});

Advertisement

Answer