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巴貝爾裝載機語法錯誤：在意外令牌「：單擊」語法

回答

相關問題