The data property "article" is already declared as a prop. Use prop default value instead

Question

Code:

export default {
    props: {
        article: {type: Object}
    },
    data () {
        return {article: this.article}
    }, 
    methods: {
        itemClick () {
            console.log('itemClick');
        }
    }
};

Vue2.1.10 warning in Chrome developers tools: The data property "article" is already declared as a prop. Use prop default value instead.

Answer 1

You have added article at both places data and props. It should be one of these, thats why you are getting the error. You have to remove it one of the place, if you are passing it from parent component, then keep it as props. If this is a local instance data, keep it in vue data block.

export default {
  props: {
    article: {
      type: Object
    }
  },
  data() {
    return {
      article: this.article
    }
  },
  methods: {
    itemClick() {
      console.log('itemClick');
    }
  }
};

Answer 2

Once you declare article in props, you do not need to return it in side data. See below.

export default {
  props: {
    article: {type: Object}
  },

  data () {}, 

  methods: {
    itemClick () {
      console.log('itemClick');
    }
  }
};

Answer 3

If you are using TypeScript then you might have assigned a value to prop.

@Component
export default class HelloWorld extends Vue {
  @Prop({ type: Array }) users = []; // wrong, do not assign to a prop
}

Change to this

...
@Prop({ type: Array }) users;
...