Vue警告：已分配计算属性“projectName”，但没有设置器

Posted 2023-02-23

【中文标题】Vue警告：已分配计算属性“projectName”，但没有设置器

【英文标题】：Vue warn: Computed property "projectName" was assigned to but it has no setter

【发布时间】：2020-07-18 12:11:14

【问题描述】：

我正在尝试使用 Vuex 用数据填充表单，然后以相同的表单对其进行编辑，但目前无法正常工作。

这是代码：

<template>
  <v-dialog v-model="dialogEditProject" max- >
    <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']),
  ,

现在在文本字段中出现 projectName，但是当我尝试执行 PUT 时，不修改该字段。 有什么办法解决这个问题吗？

非常感谢

【参考方案1】：

那是因为你有一个projectName 的getter（即来自mapState 方法），你没有一个setter，即使你在v-model 绑定中使用了它。 v-model 绑定是双向的，因此它既可以读取/获取，也可以写入/设置。

您将需要一个相应的 mapMutations，以便对 projectName 所做的更改将在您的 VueX 存储中提交突变或调度操作（两者都被视为设置器）：

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

...或：

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

【讨论】：

我现在已经包含了mapMutation，但是当我修改文本字段并单击表单中的提交时无法刷新projectName数据。当我修改文本字段或类似的东西时，可能我需要包含一个手表？