VUE巴贝尔装载机语法错误：在意外令牌“：单击”语法

.script.js：

methods: { 
    handleClick(data){ 
     console.log(data) 
    }, 
    render(h, { node, data, store }) { 
      return (
       <span> 
        <span> 
         <span>{node.label}</span> 
        </span> 
        <span style="float: right; margin-right: 20px"> 
         <a href="javascript:;" 
          :attr="data.id" @click="handleClick">Edit{data.id} 
         </a> 
        </span> 
       </span> 
      ); 
     } 
}

但巴贝尔encoutners错误说法:click有意外的标记。

.vue：

<template src="./template.html"></template> 
<script src="./script.js"></script>

package.json：

"vue": "^2.2.6" 
"vue-router": "^2.4.0" 
"element-ui": "^1.2.8", 
"babel-core": "^6.24.0", 
"babel-loader": "^6.4.1", 
"babel-plugin-transform-vue-jsx": "^3.4.2", 
"vue-loader": "^11.3.4", 
"webpack": "^2.3.1",

webpack：

{ 
    test: /\.vue$/, 
    loader: `vue-loader`, 
    options: { 
     loaders: { 
      js: 'babel-loader' 
     } 
    } 
}, 
{ 
    test: /\.js$/, 
    loader: `babel-loader`, 
    exclude: /(node_modules)/ 
}

.babelrc：

{ 
    "presets": [ 
     ["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3" 
    ], 
    "plugins": [ 
     ["transform-vue-jsx"], 
     ["transform-object-assign"], 
     ["component", [{ 
      "libraryName": "element-ui", 
      "styleLibraryName": "theme-default" 
     }]] 
    ] 
}

当我运行gulp dist，巴贝尔像如下抛出一个错误：

Namespaced tags/attributes are not supported. JSX is not XML.\nFor attributes like xlink:href, use xlinkHref instead.

来源

2017-04-26 Aflext

你是不是指'@ click'？ – thanksd

@thanksd我编辑它。 – Aflext

这不是JSX。您不能混用JSX和Vue语法;它是一个或另一个。它应该像'onClick = {this.handleClick}'。 – Bert

由于@Bert埃文斯建议，重新阅读的https://github.com/vuejs/babel-plugin-transform-vue-jsx的reademe文档后，我想通了，我刚写的代码而不理解特定于vue的jsx语法的语法。

由于文档说：

Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show , which can be used with the v-show={value} syntax. In most cases there are obvious programmatic equivalents, for example v-if is just a ternary expression, and v-for is just an array.map() expression, etc.

The equivalent of the above in Vue 2.0 JSX is:

render (h) { 
     return (
     <div 
      // normal attributes or component props. 
      id="foo" 
      // DOM properties are prefixed with `domProps` 
      domPropsInnerHTML="bar" 
      // event listeners are prefixed with `on` or `nativeOn` 
      onClick={this.clickHandler} 
      nativeOnClick={this.nativeClickHandler} 
      // other special top-level properties 
      class={{ foo: true, bar: false }} 
      style={{ color: 'red', fontSize: '14px' }} 
      key="key" 
      ref="ref" 
      // assign the `ref` is used on elements/components with v-for 
      refInFor 
      slot="slot"> 
     </div> 
    ) 
    }

所以，我改变了我的代码

render(h, {node,data,store}) { 
    const link = { 
     href: `/#/schema-type/${data.id}` 
    }; 
    return (
     <span> 
      <span> 
       <span>{node.label}</span> 
      </span> 
      <span> 
       <a href={link.href} target="_blank">edit</a> 
      </span> 
     </span> 
    ); 
}

和它的作品！

来源

2017-04-27 01:44:57 Aflext

尝试写你的HTML作为一个字符串：

Vue.component('my-component', { 
    template: '<div>A custom component!</div>' 
});

看起来你是用来反应，但它写一点不同。

来源

2017-04-27 14:04:13 Haiko

VUE巴贝尔装载机语法错误：在意外令牌“：单击”语法

回答

相关问题