CODEWITHSUNDEEP
javascriptvue.jselement-ui
bisiriyu daniel
bisiriyu daniel

Reputation: 13

How do I get rid of this error "Computed property validateState was assigned to but it has no setter" in the console while using element-ui with VueJs

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: []
    };
  },
}

Upvotes: 1

Views: 2966

Answers (1)

hamid niakan
hamid niakan

Reputation: 2871

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.

Upvotes: 1

Related Questions