Conflict with v-model in an existing vue project #38

rayoplateado · 2018-01-10T16:48:42Z

Hi all. I have an existent vue project (vue@2.5.13) and now i'm trying to install botUI into it. So:

I've edited webpack config:

module.exports = {
  // use inline sourcemap for karma-sourcemap-loader
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue: 'vue/dist/vue.min.js',
    },
  },
...

I've imported botUI in my main.js file
I've instanced botUIn my main.js file

const botui = new BotUI('hello-world', {
  vue: Vue, // or this
});

botui.message.add({
  content: 'Hello World from bot!',
});

botui.message.add({
  human: true,
  content: 'Hello World from human!',
});

I've added botUI into my template in index.html file

<body>
  <div id="app"></div>
  <div class="botui-app-container" id="hello-world">
    <bot-ui></bot-ui>
  </div>
</body>

Now, i'm seeing this error in the browser console:

[Vue warn]: Error compiling template:

<div class="botui botui-container" v-botui-container><div class="botui-messages-container"><div v-for="msg in messages" class="botui-message" :class="msg.cssClass" v-botui-scroll><transition name="slide-fade"><div v-if="msg.visible" :class="[{human: msg.human, 'botui-message-content': true}, msg.type]"><span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span> <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe></div></transition><div v-if="msg.loading" class="botui-message-content loading"><i class="dot"></i><i class="dot"></i><i class="dot"></i></div></div></div><div class="botui-actions-container"><transition name="slide-fade"><div v-if="action.show" v-botui-scroll><form v-if="action.type == 'text'" class="botui-actions-text" @submit.prevent="handle_action_text()" :class="action.cssClass"><i v-if="action.text.icon" class="botui-icon botui-action-text-icon fa" :class="'fa-' + action.text.icon"></i> <input type="text" ref="input" :type="action.text.sub_type" v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder" :size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required v-focus/> <button type="submit" :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}"><i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + action.text.button.icon"></i> <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span></button></form><div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass"> <button type="button" :class="button.cssClass" class="botui-actions-buttons-button" v-for="button in action.button.buttons" @click="handle_action_button(button)" autofocus><i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i> {{button.text}}</button></div></div></transition></div></div>

- :value="action.text.value" conflicts with v-model on the same element because the latter already expands to a value binding internally


found in

---> <BotUi>
       <Root>
app.js%20line%20600%20%3E%20eval:580:

What i'm doing wrong? seems pretty simple...

Thank you! 😄

The text was updated successfully, but these errors were encountered:

IssueHuntBot · 2018-06-29T09:22:30Z

@Oliver-U funded this issue with $2.0. Visit this issue on Issuehunt

heibaikn · 2018-08-04T13:25:49Z

I have the same problem. Have you solved it

chenqiao123 · 2018-12-02T01:20:02Z

改为：module.exports = {
// use inline sourcemap for karma-sourcemap-loader
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
vue$: 'vue/dist/vue.min.js',
},
},
查看：https://cn.vuejs.org/v2/guide/installation.html，

codedbyandrew mentioned this issue Mar 1, 2018

Fix Vue Value conflicts with v-model warning #46

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Conflict with v-model in an existing vue project #38

Conflict with v-model in an existing vue project #38

rayoplateado commented Jan 10, 2018

IssueHuntBot commented Jun 29, 2018

heibaikn commented Aug 4, 2018

chenqiao123 commented Dec 2, 2018

Conflict with v-model in an existing vue project #38

Conflict with v-model in an existing vue project #38

Comments

rayoplateado commented Jan 10, 2018

IssueHuntBot commented Jun 29, 2018

heibaikn commented Aug 4, 2018

chenqiao123 commented Dec 2, 2018