fragment instance issue

Haixing-Hu / vue-html-editor

A Vue.js component implementing the HTML editor with the jQuery summernote plugin.

http://haixing-hu.github.io/vue-html-editor/

MIT License

388 stars 106 forks source link

fragment instance issue #10

Open martinhearn opened 8 years ago

martinhearn commented 8 years ago

Trying this component I get the following error:

Attribute ":model.sync" is ignored on component <vue-html-editor> because the component is a fragment instance

I'm using Vue 1.0.26.

What am I doing wrong?

Thanks!

Martin

mocheaz commented 8 years ago

Any update for this?

liujunyang commented 8 years ago

bug still here

Haixing-Hu commented 8 years ago

@martinhearn Could you please paste the code snippet? I can not reproduce the bug on the demo page. I have already upgrade to Vue.js v1.0.26.

Remo commented 8 years ago

@Haixing-Hu when I look at the demo available here http://haixing-hu.github.io/vue-html-editor/demo.html I see that you are using Vue.js v0.12.16. I'm using Vue.js v1.0.26. The numbers are similar, but your version is very old.

Remo commented 8 years ago

@Haixing-Hu I've seen that you updated vue.js in the repo, I guess I've been looking at the wrong thing. I still get the problem above though. Here's what I've did:

npm install vue vue-html-editor
npm install -g browserify

app.js

Vue = require('vue');
Vue.component('vue-html-editor', require("vue-html-editor"));

new Vue({
    el: "#app",
    data: {},
});

index.html

<!DOCTYPE html>
<html lang="en">
    <body>
    <div id="app">
        <vue-html-editor model="{{@ text}}"></vue-html-editor>
        <div style="margin-top:40px">
            <div> The HTML contents are as follows:</div>
            <div>{{{text}}}</div>
        </div>
    </div>
    <script src="index.js"></script>
</body>

Create index.js

browserify app.js > index.js

jioll commented 8 years ago

@Haixing-Hu 上面提到实例片问题段貌似因为vue版本较新导致？

woshihaoren commented 8 years ago

@Haixing-Hu Use vue init initialization project vue init webpack test replace default's App component

<template>
  <div id="app">
<editor name="html-editor" :model.sync="text"></editor>
  <div style="margin-top:40px">
    <div> The HTML contents are as follows:</div>
    <hr>
    <div >{{{text}}}</div>
  </div>
  </div>
</template>

<script>
import Hello from './components/Hello'
import editor from 'vue-html-editor'

export default {
  components: {
    Hello,
    editor
  }
}
</script>

console

vue.common.js?1090:1019[Vue warn]: Attributes "name", ":model.sync" are ignored on component because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

Chalkin commented 8 years ago

Have the same issue while using laravel + spark + browserify. Can't use webpack here.

working with vue.js 1.0.26

Wifsimster commented 8 years ago

Same problem here with current version and webpack.

goldfinch commented 8 years ago

the same problem, Vue 1.0.26

freevital commented 8 years ago

Same problem with webpack.

thats4shaw commented 8 years ago

Facing the same issue with Laravel + Spark + Browserify.

amitavroy commented 8 years ago

same problem even when I am trying inside vue cli webpack template.

ada012 commented 8 years ago

@Haixing-Hu @timfeid

Is there any answer? I changed all the template: "<textarea class='form-control' :name='name'></textarea>" to "<div><textarea class='form-control'", :name='name'></textarea></div>" Or is it wrong?

roarkmccolgan commented 8 years ago

Hi,

I also have this issue, adding the div in the template does not help, Using Browserify

ewerkema commented 8 years ago

The solution by @timfeid with copying the vue-html-editor.js file to your local environment worked for me:

"Interesting, for some reason I was able to get this working by just copying vue-html-editor.js to my local. Using require('vue-html-editor') fails, but using require('./vue-html-editor') works without the div there as well."

It would be great if this issue could be solved!