Method "extend" has already been defined as a prop.

myadomin commented 6 years ago

Summary 简述

我按官方demo 如下图

_20180712093704

出现如下2个报错： Method "extend" has already been defined as a prop.

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "extend"

用的是"v-charts": "^1.16.8", vue是"vue": "2.5.3", 请问什么原因

Expect 期望结果

Reproduce 重现示例

xiguaxigua commented 6 years ago

升级一下版本，如果还是有问题的话提供一个重现的示例吧

twoer commented 6 years ago

我的也报这个错误，版本信息：

"v-charts": "^1.17.8", "vue": "^2.5.16",

xiguaxigua commented 6 years ago

@twoer 能否提供一下重现的示例呢？或者是代码的截图

twoer commented 6 years ago

@xiguaxigua 稍等提供一份 demo，发现打包后，不会报错，开发环境会报错。

xiguaxigua commented 6 years ago

我在测试项目中使用下面的代码没有测试出问题，请提供一下如何使用 extend 的代码示例吧。

<template>
  <div class="hello">
    <ve-line :data="chartData" :extend="chartExtend"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    this.chartExtend = {
      series: {
        label: {
          show: true,
          position: 'top'
        }
      }
    }
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  }
}
</script>

twoer commented 6 years ago

@xiguaxigua 很奇怪，我新建了一个 demo，同样的版本：

"echarts": "^4.1.0",    
"v-charts": "^1.17.8",
"vue": "^2.5.16"

居然没有报错，我自己的项目中，我没有用 extend 属性，

xiguaxigua commented 6 years ago

方便发我一下会报错的那个项目的部分代码吗？

myadomin commented 6 years ago

@tower 我也是开发环境报错打包后上生产环境就不报错了

xiguaxigua commented 6 years ago

@myadomin 方便提供一下出问题的代码或者重现示例吗？

youkoala commented 6 years ago

开发运行就提示错误，一样是extend已存在，是不是和vue的extend冲突了下面是package包： "dependencies": { "axios": "^0.17.1", "babel-runtime": "^6.26.0", "css-loader": "^0.28.8", "echarts": "^4.1.0", "element-ui": "^2.2.2", "jquery": "^3.3.1", "js-cookie": "^2.2.0", "node-sass": "^4.7.2", "qrcodejs2": "^0.0.2", "qs": "^6.5.1", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "swiper": "^4.1.0", "tesla-ui": "^1.1.6", "v-charts": "^1.17.10", "vue": "^2.5.2", "vue-awesome-swiper": "^3.1.2", "vue-cropper": "^0.2.9", "vue-lazyload": "^1.2.6", "vue-photo-preview": "^1.0.9", "vue-router": "^3.0.1", "vue-style-loader": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "node-sass": "^4.8.3", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "sass-loader": "^6.0.6", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" },

532pyh commented 5 years ago

"echarts": "^4.2.0-rc.2",

"v-charts": "^1.19.0", "vue": "^2.5.2", Method "extend" has already been defined as a prop.

<template>
  <ve-line :data="chartData" :extend="extend"></ve-line>
</template>

<script>
  export default {
    data: function () {
      this.extend = {
        'xAxis.0.axisLabel.rotate': 45
      }
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
            { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>

初步怀疑是extend 和VUE中this.extend()命名冲突了，不知道怎么修改

maxy612 commented 5 years ago

在codepen上放一下报错代码示例 @532pyh

javaylh commented 5 years ago

解决了吗？

1046964106 commented 5 years ago

大佬解决了没有呢!

ponytony commented 5 years ago

@maxy612 @xiguaxigua 我也出现了这种情况，不知道别人什么情况，我是引入了vue-photo-preview后就出了问题，看了下两个库的源码，发现自己解决不了，我的demo在👇 https://github.com/ponytony/vchart-bug.git

ponytony commented 5 years ago

解决了，我出现这个问题是因为在vue-photo-preview/lib.index中使用了vue.mixin,全局混入的功能，而混入的函数中就有extend这个方法，而且不知道为什么，这个混入的方法的优先级高于vchart的extend，所以解决方法也很简单，将那个库拷贝出来，自己再改写就好，或者直接向作者提issue

Superbsco commented 5 years ago

解决了，我出现这个问题是因为在vue-photo-preview/lib.index中使用了vue.mixin,全局混入的功能，而混入的函数中就有extend这个方法，而且不知道为什么，这个混入的方法的优先级高于vchart的extend，所以解决方法也很简单，将那个库拷贝出来，自己再改写就好，或者直接向作者提issue

请问大佬怎么改写，我也遇到这问题，求解

zzxCNCZ commented 5 years ago

@ponytony 我也遇到同样的问题，同为引入了vue-photo-preview，不知道你是如何修改的，求解

mvpleung commented 4 years ago

针对vue-photo-preview导致的报错的问题，我修改了一份可以用的版本 https://www.npmjs.com/package/@mvpleung/vue-photo-preview

npm install @mvpleung/vue-photo-preview --save

ElemeFE / v-charts