I got a problem on using your component.
First of all: I'm not a Vue.js specialist. I am developing small MIT-licensed extensions for Pagekit CMS (https://pagekit.com) and I would like to use v-money
on my next.
Pagekit uses Vue 1.x .
window.item = {
el: '#item',
data: function () {
return {
data: window.$data,
item: window.$data.item,
sections: [],
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
suffix: ' #',
precision: 2,
masked: false
}
}
},
created: function () {
var sections = [];
_.forIn (this.$options.components, function (component, name) {
var options = component.options || {};
if (options.section) {
sections.push (_.extend ({name: name, priority: 0}, options.section));
}
});
this.$set ('sections', _.sortBy (sections, 'priority'));
this.resource = this.$resource ('api/items/item{/id}');
},
ready: function () {
this.tab = UIkit.tab (this.$els.tab, {connect: this.$els.content});
},
methods: {
save: function () {
var data = {item: this.item, id: this.item.id};
this.$broadcast ('save', data);
this.resource.save ({id: this.item.id}, data).then (function (res) {
var data = res.data;
if (!this.item.id) {
window.history.replaceState ({}, '', this.$url.route ('admin/items/item/edit', {id: data.item.id}))
}
this.$set ('item', data.item);
this.$notify ('item saved.');
}, function (res) {
this.$notify (res.data, 'danger');
});
}
},
components: {
settings: require ('../../components/item-edit.vue')
}
};
Vue.ready (window.item);
As you can see here, I'm including a component. This component contains the input fields and so on.
<template>
<div class="uk-grid pk-grid-large pk-width-sidebar-large uk-form-stacked" data-uk-grid-margin>
<div class="pk-width-content">
<div class="uk-form-row">
<input class="uk-width-1-1 uk-form-large" type="text" name="title" :placeholder="'Enter Title' | trans"
v-model="item.title" v-validate:required>
<p class="uk-form-help-block uk-text-danger"
v-show="form.title.invalid">{{ 'Title cannot be blank.' | trans }}</p>
</div>
</div>
<div class="pk-width-sidebar">
<div class="uk-panel">
<div class="uk-form-row">
<label for="form-slug" class="uk-form-label">{{ 'Slug' | trans }}</label>
<div class="uk-form-controls">
<input id="form-slug" class="uk-width-1-1" type="text" v-model="item.slug">
</div>
</div>
<div class="uk-form-row">
<label for="form-status" class="uk-form-label">{{ 'Status' | trans }}</label>
<div class="uk-form-controls">
<select id="form-status" class="uk-width-1-1" v-model="item.status">
<option v-for="(id, status) in data.statuses" :value="id">{{status}}</option>
</select>
</div>
</div>
<div>
<money v-model="price" v-bind="money"></money>
</div>
</div>
</div>
</div>
</template>
<script>
import {Money} from 'v-money'
module.exports = {
props: ['item', 'data', 'form'],
section: {
label: 'Item'
},
components: {
money: {Money}
}
};
</script>
Unfortunately this does not work. I'm receiving this error:
[Vue warn]: Attributes "v-model", "v-bind" are ignored on component <money> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance
warn — vue.js:1141
compileRoot — vue.js:7215
_compile — vue.js:8752
$mount — vue.js:9607
_init — vue.js:2587
VueComponent — Anonymes Skript 1 (Zeile 2)
build — vue.js:5967
mountComponent — vue.js:5884
(anonyme Funktion) — vue.js:5846
(anonyme Funktion) — vue.js:5864
_resolveComponent — vue.js:9030
resolveComponent — vue.js:5866
setComponent — vue.js:5845
bind — vue.js:5805
_bind — vue.js:8486
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
_compile — vue.js:8772
$mount — vue.js:9607
_init — vue.js:2587
VueComponent — Anonymes Skript 2 (Zeile 2)
build — vue.js:5967
mountComponent — vue.js:5884
(anonyme Funktion) — vue.js:5846
(anonyme Funktion) — vue.js:5864
_resolveComponent — vue.js:9030
resolveComponent — vue.js:5866
setComponent — vue.js:5845
update — vue.js:5819
_bind — vue.js:8521
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
Fragment — vue.js:3876
create — vue.js:4093
create — vue.js:4333
diff — vue.js:4232
update — vue.js:4165
_bind — vue.js:8521
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
_compile — vue.js:8772:90
$mount — vue.js:9607
_init — vue.js:2587
Vue — vue.js:9671
e — vue.js:1:1334
r — vue.js:1:1445
warn — vue.js:1141