vue babel-loader SyntaxError: Неожиданный токен в синтаксисе: click

Я использую функцию рендеринга следующим образом:

.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>
            );
        }
}

Но ошибка babel 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, babel выдает следующую ошибку:

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


vue.js jsx vuejs2 vue-loader vue-component
person Aflext    schedule 26.04.2017    source источник
comment
Вы имели в виду @click?   -  person thanksd    schedule 26.04.2017
comment
@thanksd, я отредактировал это.   -  person Aflext    schedule 26.04.2017
comment
Это не JSX. Вы не можете смешивать синтаксис JSX и Vue; это одно или другое. Должно быть что-то вроде onClick={this.handleClick}.   -  person Bert    schedule 26.04.2017

Ответы (2)


arrow_upward
1
arrow_downward

Как предложил @Bert Evans, после повторного чтения документов reademe https://github.com/vuejs/babel-plugin-transform-vue-jsx, я понял, что просто написал код, не понимая синтаксиса синтаксиса jsx, специфичного для vue.

Как говорится в документах:

Обратите внимание, что почти все встроенные директивы Vue не поддерживаются при использовании JSX, единственным исключением является v-show, который можно использовать с синтаксисом v-show={value}. В большинстве случаев существуют очевидные программные эквиваленты, например, v-if — это просто троичное выражение, а v-for — это просто выражение array.map() и т. д.

Эквивалент вышеперечисленного в Vue 2.0 JSX:

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>
    );
}

И это работает!

person Aflext    schedule 27.04.2017

arrow_upward
0
arrow_downward

Попробуйте написать свой html в виде строки:

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

Похоже, вы привыкли к React, но пишете немного по-другому.

person Haiko    schedule 27.04.2017