Quasar Select 使用 Composition API 对用户输入作出反应

Question

我有一个应用程序，其中我的 vue 组件有一个 Select 控件，用户可以在其中 select 多个项目。我希望此属性根据用户 select 在下拉列表中的内容进行更新。但是，我在尝试设置时继续收到此错误

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

select 用作输入，因此用户可以添加或删除多个电子邮件地址以下是显示重要位的代码的精简版本...

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 1

尝试通过添加 setter 使计算的属性可写：

const taskRecipients = computed({

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

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

  }

});

Quasar Select 使用 Composition API 对用户输入作出反应

Quasar Select reacting to user input with Composition API

javascript

vue.js

vue-component