1

I am currently using element-ui version 2.14.1 in a Vue Js project. I am importing only the select component on demand as recommended by element-ui here https://element.eleme.io/#/en-US/component/quickstart . In every component I use the select component, I get this error in the console

[Vue warn]: Computed property "validateState" was assigned to but it has no setter.

found in

---> <ElInput> at packages/input/src/input.vue
      <ElSelect> at packages/select/src/select.vue

Does anyone have any Idea what is causing this error and how I can resolve it. It is really frustrating. I can provide more information if need be. Thank you in advance.

To provide more details as someone asked, In main.js I have

import lang from "element-ui/lib/locale/lang/en";
import locale from "element-ui/lib/locale";
locale.use(lang);

import { Option, Select, } from "element-ui";

Vue.use(Option);
Vue.use(Select);

While in my component I have

<template>
  <div class="route-start">
    <div>
      <p class="text-secondary-orange font-semibold mb-3">Start</p>
    </div>
    <div class="state">
      <label class="label">State</label>

      <el-select filterable v-model="selectedState" placeholder="Select">
        <el-option
          v-for="state in states"
          :key="state.id"
          :label="state.name"
          :value="state.id"
        >
        </el-option>
      </el-select>
    </div>
   </div>
</template>

Then in the script section I have

export default {
  data() {
    return {
      selectedState: "",
      isLastMile: "",
      states: []
    };
  },
}
bisiriyu daniel
  • 13
  • 1
  • 4
  • see https://stackoverflow.com/questions/46106037/vuex-computed-property-name-was-assigned-to-but-it-has-no-setter – danh Nov 29 '20 at 20:53
  • Show how you used this select component – Anatoly Nov 29 '20 at 20:53
  • @Anatoly I have updated the question to show how I use it. – bisiriyu daniel Nov 29 '20 at 21:04
  • @danh I actually have read the question and the answers on that page and I understand the problem there and the solutions but the validateState property comes from element-ui. – bisiriyu daniel Nov 29 '20 at 21:08
  • Does this answer your question? [Vuex - Computed property "name" was assigned to but it has no setter](https://stackoverflow.com/questions/46106037/vuex-computed-property-name-was-assigned-to-but-it-has-no-setter) – fjplaurr Nov 29 '20 at 21:29
  • Finally found the solution, thanks. A method called validateState was clashing with the computed property. Made changes to the method and now the error is gone. – bisiriyu daniel Nov 30 '20 at 11:35

1 Answers1

1

As stated in the documentation in the link below:

Computed properties are by default getter-only, but you can also provide a setter when you need it

Computed setter vue documentation

So what this means is that computed properties are usually used to return a value based on the other values and we use the computed value in the template. It is also possible to assign a value to the computed and if you do that you need to define the setter in the computed.

From the error you are getting I guess that somewhere in your code you assign a value to the computed intentionally or unintentionally but your computed doesn't have the setter. By adding a setter to your computed you can resolve this error.

Read the document in the link above, it has a pretty good example and feel free to ask if there is something unclear here.

tony19
  • 125,647
  • 18
  • 229
  • 307
hamid niakan
  • 2,668
  • 1
  • 12
  • 25
  • Thanks a whole lot. The solution was in your third paragraph. Had to look through the entire codebase to look for any computed property called validateState and sure enough there was a method called validateState created by another dev which I guess was causing a clash with element-ui's computed property. Did a bit of adjustment and now the error is gone. – bisiriyu daniel Nov 30 '20 at 11:33
  • @bisiriyudaniel glad you've solved the problem – hamid niakan Nov 30 '20 at 11:49