Vue warn: вычисленное свойство "projectName" было назначено, но у него нет установщика

Question

Я пытаюсь заполнить форму данными с помощью Vuex и после этого редактировать ее в той же форме, но на данный момент не работает.

Это код:

<template>
  <v-dialog v-model="dialogEditProject" max-width="1200px" height="200px">
    <v-card>
      <v-card-title class="head-modal">
        <v-list-item-avatar class="logo-modal">
          <v-img src="@/assets/logo.svg"></v-img>
        </v-list-item-avatar>
        <span class="title-modal">EDIT PROJECT</span>
      </v-card-title>
      <v-form ref="form" v-model="valid" onSubmit="return false;" lazy-validation>
        <v-row no-gutters>
          <v-col class="col1" cols="4">
            <span class="login-txt">Name Project</span>
            <v-row>
              <v-text-field
                v-model="projectName"
                @change="updateMessage"
                label
                :rules="nameProjectRules"
                solo
                name
                required
                shaped
              />
            </v-row>
            <span class="name-project">{{ projectName }}</span><br>
            <span class="login-txt">Author</span>
            <v-row>
              <v-text-field
                v-model="authorProject"
                label
                :rules="authorProjectRules"
                solo
                name
                required
                shaped
              />
            </v-row>

            <v-card-actions class="btn-new-project-modal">
              <v-btn id="btn-cancel-modal" class="btn-secondary" text @click="close">Cancel</v-btn>
              <v-btn
                id="btn-create-modal"
                class="btn-primary"
                :disabled="!valid"
                type="submit"
                @click="updateProject"
                >Update</v-btn
              >
            </v-card-actions>
          </v-col>
      </v-form>
    </v-card>
  </v-dialog>
 </template>

и JS:

    computed: {
    ...mapState('projects', ['projectName', 'authorProject', 'projectUuid']),
  },

Теперь в текстовом поле появляется имя_проекта, но когда я пытаюсь сделать PUT, не изменяю поле. Есть идеи, чтобы это исправить?

Большое спасибо

Answer 1

Это потому, что у вас есть геттер для projectName (то есть из метода mapState), у вас нет сеттера для него, даже если вы использовали его в привязке v-model. Привязка v-model является двусторонней, поэтому она может как считывать / получать, так и записывать / устанавливать.

Вместо этого вам потребуется соответствующий mapMutations, чтобы изменения, внесенные в projectName, зафиксировали мутацию или отправьте действие (оба считаются сеттерами) в вашем магазине VueX:

methods: {
    ...mapMutations('projects', ['projectName']),
}

... или:

methods: {
    ...mapActions('projects', ['projectName']),
}