[Vue warn]: The setup binding property "xxx" is already declared.

See original GitHub issue

Existing project need to use vue3.0，i add ‘@vue/composition-api’ to my project。 dependencies：

  1. “vue”: “2.5.22”, 2.“@vue/composition-api”: “^0.3.4”, I run the following code and the console prompts me： [Vue warn]: The setup binding property “state” is already declared. [Vue warn]: The setup binding property “increment” is already declared.
<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
// import { reactive, computed } from 'vue'
import { computed, reactive } from '@vue/composition-api';

export default {
  setup() {
    const state = reactive({
      count: 1,
      double: 1,
    })
    state.double = computed(() => state.count * 2)
    const increment = () => {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

1577327135(1)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:30 (3 by maintainers)

github_iconTop GitHub Comments

10reactions
webrsbcommented, Sep 29, 2020

It happened if I register VueCompositionAPI twice like this:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

const localVue = createLocalVue()
localVue.use(VueCompositionAPI )

const wrapper = mount(Component, {
  localVue
})

Not sure but this bug still appears when doing test by mocking methods.

handler module:

{
   ...
   ...
   return {
      method1
   }
}
export default handlerFn

vue component:

<template>
  <button @clcik="method1"></button>
</template

const { method1 } = handlerFn()

setup(){
return{
   method1
  }
}

test with mock

const spy1 = jest.spyOn(handler, 'method1')
    const w = mount(LoginComponent, {
       mocks: {
        method1: spy1
      }
    })
  expect(spy1).toBeCalled()

The test passes but the warning never goes away.

[Vue warn]: The setup binding property "method1" is already declared.

tested on “@vue/composition-api”: “0.5.0”, “0.6.7” & “1.0.0-beta.11”

5reactions
irowbincommented, Aug 25, 2020

Not sure but this bug still appears when doing test by mocking methods.

handler module:

{
   ...
   ...
   return {
      method1
   }
}
export default handlerFn

vue component:

<template>
  <button @clcik="method1"></button>
</template

const { method1 } = handlerFn()

setup(){
return{
   method1
  }
}

test with mock

const spy1 = jest.spyOn(handler, 'method1')
    const w = mount(LoginComponent, {
       mocks: {
        method1: spy1
      }
    })
  expect(spy1).toBeCalled()

The test passes but the warning never goes away.

[Vue warn]: The setup binding property "method1" is already declared.

tested on “@vue/composition-api”: “0.5.0”, “0.6.7” & “1.0.0-beta.11”

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack alias for loading external components, wrong ...
If I don't use " import Vue from 'vue'; import VueCompositionApi from ... [Vue warn]: The setup binding property “xxx” is already declared....
Read more >
[Vue warn]: Invalid prop: type check failed for ... - Stack Overflow
Everything works fine but I get Vue warnings for all the declared props: [Vue warn]: Invalid prop: type check failed for prop "text"....
Read more >
vue2中使用composition/api, script setup问题记录 - CSDN博客
The setup binding property “xxx” is already declared as a prop. 在这里插入图片描述 解决方法：除了在监听xxx时，其他地方使用props引入的变量时使用 ...
Read more >
[vue3] Property xxx was accessed during render but is not ...
In Vue.js, the error generally means you are referring to a variable which could be a data, prop, method or computed property in...
Read more >
property was accessed during render but is not defined on ...
StackOverflow · Create a temp folder, switch to it and initiate a node project: · create index.js : · Add required packages for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found