Vue warn Computed property "validateState" was assigned to but it has no setter

[Talha Zekeriya Durmuş]

Online reproduce

Current Behavior

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

found in

---> <ElInput> at packages/input/src/input.vue
       <Jumper>
         <ElPagination>
           <DataTablesServer>
             <BColxx> at components/common/Colxx.vue
               <WalletView> at pages/wallet/index.vue
                 <App> at layouts/app.vue
                   <Root>

Steps to Reproduce

          <data-tables-server>

          </data-tables-server>

Detailed Description

I get the warning all the time even in the code given above.

Other Information

element-ui 2.5.4
vue-data-tables 3.4.4

I am using nuxt and marked them ssr false

{src: '~plugins/element-ui', ssr: false},
{src: '~plugins/vue-data-tables', ssr: false},

[Leon Zhang]

validateState is not a variable of vue-data-tables, please check your own code.
you can use vue-data-tables with ssr, refer to https://www.njleonzhang.com/vue-data-tables/#/en-us/ssr

[Talha Zekeriya Durmuş]

I also tried the referenced method but warning persists.

If I hide pagination, warning is gone. Maybe this is a bug related to element-ui and you are using old buggy version?

<data-tables-server layout="table"></data-tables-server>
``` 

[Leon Zhang]

I have checked the online demo, and have not found the issue you mentioned. element-ui is not built into vue-data-tables, but a peer dependency, so you can determine the version of element-ui.

By searching validateState in element-ui code , I find that the variable is used in el-form, I think you need to check your code.

Currently I can not think out any relationship between your issue and vue-data-tables.

Anyway, if you think it's really a bug of vue-data-tables, please provide me a reproduce link. (refer to https://jsfiddle.net/zpczjl/xboja87c/)

[Talha Zekeriya Durmuş]

By searching validateState in element-ui code , I find that the variable is used in el-form, I think you need to check your code.

I know you can't reproduce the issue in jsfiddle but this is a nuxt project. Obviously it works in normal environment but my problem occurs in nuxt and I dont know how to simulate nuxt as you do in jsfiddle.

You can see my main layout in the picture. There is no other code. What can I check 😞

My element-ui plugin

import Vue from 'vue';
import ElementUI from 'element-ui';
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

locale.use(lang);

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

const ElTreeGrid = require('element-tree-grid');
Vue.component(ElTreeGrid.name, ElTreeGrid);

My vue-data-tables plugin

import Vue from 'vue'
import DataTablesServer from 'vue-data-tables/dist/data-tables.server'

Vue.use(DataTablesServer);

And here is my plugin definition

'~plugins/element-ui',
{src: '~/plugins/vue-data-tables', ssr: false},

[Talha Zekeriya Durmuş]

I can render el-pagination easily and I get no warning

          <el-pagination
              layout="prev, pager, next"
              @current-change="loadData"
              :page-size.sync="meta.per_page"
              :current-page.sync="meta.current_page"
              :total="meta.total">
          </el-pagination>

[Talha Zekeriya Durmuş]

I guess this bug is related to element-ui. Sorry for my inconvenience

[Leon Zhang]

@zek OK, maybe you can provide a sample Nuxt project to repro the issue, otherwise I am afraid element-ui would not help you.

[Talha Zekeriya Durmuş]

ElemeFE/element#14467 (comment)

If you don't put ElInput in ElForm, validateState will be empty. I think it's not a bug of Element.