I use the autonumeric lib and import the component to vue to be use , everything was okey but then the v-model turns out not working the value is not updated when i tried to console.log the value. here is my code
<template>
<div class="container">
<div class="form-group">
<label for="exampleInputEmail1">Input Price</label>
<vue-autonumeric
class="supply_input px-3 py-1.5"
:options="{
digitGroupSeparator: ',',
decimalCharacter: '.',
decimalCharacterAlternative: '.',
currencySymbol: '',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0',
}"
v-model="price"
/>
</div>
</div>
</template>
For the variable of price is
const price = ref("")
which should be reactive but it seems the value is not updated
For the autonumeric i use this lib from github https://github.com/autoNumeric/vue-autoNumeric
I followed the things needed but still not working.
Related
Is it possible to use the value of a prop as the input's v-model?
I normally do the following when creating an input:
<template>
<form>
<input v-model="form.email" type="email"/>
</form>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
}
}
}
}
</script>
But now I'm trying to achieve the following where this.myProp is used within the v-model without being displayed as a string on the input:
<template>
<form>
<input v-model="this.myProp" type="email"/>
</form>
</template>
<script>
export default {
props: ['myProp'] // myProp = form.email for example (to be handled in a parent component)
}
</script>
Yes, but while using it in parent component. In child component you need to extract value and #input instead of using v-model (v-model is shortcut for value="" and #input) Here is an example of input with label, error and hint in Vue 3 composition API.
BaseInput.vue
<template>
<div class="flex flex-col">
<label>{{ label }}</label>
<input v-bind="$attrs" :placeholder="label" :value="modelValue" #input="$emit('update:modelValue', $event.target.value)">
<span v-for="item of errors" class="text-red-400">{{ item.value }}</span>
<span v-if="hint" class="text-sm">{{ hint }}</span>
</div>
</template>
<script setup>
defineProps({ label: String, modelValue: String | Number, errors: Array, hint: String })
defineEmits(['update:modelValue'])
</script>
Using v-bind="$attrs" you target where attributes like type="email" need to be applied in child component. If you don't do it, it will be added to the top level DOM element. In above scenario <div>.
ParentComponent.vue
<BaseInput type="email" v-model="formData.email" :label="Email" :errors="formErrors.email"/>
I created a simple component
<template>
<div class="MoneyInput1 col-grow block">
<div class="block text-left q-py-md">
<label class="label-1">
{{ props.jLabel }}
</label>
</div>
<q-field
:model-value="props.modelValue"
borderless
#update:modelValue="e => {$emit('update:modelValue', e)}"
>
{{ props.modelValue }}
<template v-slot:control="{ id, emitValue }">
<input
:id="id"
v-money="moneyFormatForDirective"
class="input-1 money-input basis-medium"
model-value="modelValue"
#change.self="e => emitValue(e.target.value)"
>
</template>
</q-field>
</div>
</template>
with the moneyFormat as the following
const moneyFormatForDirective = {
decimal: ',',
thousands: '.',
prefix: '$ ',
precision: 2,
masked: false,
};
The problem is that it triggers two updates, one setting the value from the parent, which is sent with v-model. The following sets it to $0,00
I saw that it could be possible to be done with v-model.lazy, but with the #change I have no idea.
I have an info-card.vue component that is used twice in a landing page, but I want different data displayed in each of them. Here is the info-card.vue component:
<template>
<div class="card-container glass-effect">
<div class="illustration-container">
<img src="{{ image }}" alt="Businesses" class="illustration">
</div>
<div class="title-container">{{ title }}</div>
<div class="paragraph-container">{{ content }}</div>
</div>
</template>
<script>
export default {
props: ['image','title', 'content']
}
</script>
And here is the landing-info.vue page that the info-card component is used in:
<div class="business-side">
<info-card image="/images/image1.png" title="BUSINESSES" content="This is some content"></info-card>
</div>
<div class="customer-side">
<info-card image="/images/image2.png" title="CUSTOMERS" content="This is some content"></info-card>
</div>
But this didn't work, I'm new to vue so any ideas?
You can't use mustache {{ }} in vue attributes. Instead use v-bind:attr="" or :attr="" where attr is the dynamic attribute you want to bind.
So, your image component should be:
<img v-bind:src="image" alt="Businesses" class="illustration" />
or
<img :src="image" alt="Businesses" class="illustration">
The colon is a shorthand for v-bind.
Read more on v-bind here.
Trying to implement the bootstrap-datepicker in conjunction with Vue, and not quite sure why my solution won't work.
I am using the code example at https://eonasdan.github.io/bootstrap-datetimepicker/
I added a v-on:click on the INPUT that then ties to a method.
TEMPLATE CODE:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input v-on:click="displayCal" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
VUE
import jquery from 'jquery';
....
methods: {
displayCal: function () {
jquery('#datetimepicker1').datetimepicker();
}
}
Will that help with what I'm trying to do?
Not exactly, I misunderstood and thought that the datepicker is a bootstrap component. Unfortunately it is not, and so while vue implementation of bootstrap could be helpful, it would leave you still with quite a bit to implement yourself.
Option 1
Use a Vue component that has the functionality out of the box
const app = new Vue({
el: '#app',
components: {
vuejsDatepicker
}
})
<div id="app">
<vuejs-datepicker></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
Demo: https://codesandbox.io/s/mpklq49wp
If that does what you need then vuejs-datepicker component may be better for you to implement.
Option 2
Get jquery and Vue to talk
This is not ideal, because the two libraries will compete for DOM control. Vue mounts and unmounts of DOM elements are data driven. That means if your data changes, your DOM may replace an element that jquery may be relying on. SO you may be able to get it to work, but based on all the other stuff going on in the app, you may find some odd things happening, that said, here is a way you can do it...
<div id="app">
<div class="container">
<p>
TIMEDATE: {{timedate}}
</p>
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
</div>
</div>
</div>
const app = new Vue({
el: '#app',
data(){
return{
timedate: new Date(),
}
},
methods:{
onUpdate(e){
this.timedate=e.date;
}
},
mounted() {
const dp = $('#datetimepicker4')
dp.datetimepicker({
defaultDate: this.timedate,
});
dp.on('dp.change', this.onUpdate )
}
})
demo: https://jsfiddle.net/fjk6cLo8/7/
This code will allow you to add the datetime picker with a preset date. Upon change of the date, using the datetime picker, the data will be updated in the vue component (using dp.change listener)
The datetime picker is mounted once right after the component mounts, and the <input type='text' class="form-control" id='datetimepicker4' /> element is available.
Below code only works when "'test'" is inside a double and single quote like this: v-b-modal="'test'"
Sample working code:
<div id="app">
<div>
<b-link v-b-modal="'test'">Click to Test Modal</b-link>
</div>
<b-modal id="test" title="Bootstrap Vue Modal 2">
<p class="my-4">Testing Bootstrap Vue Modal Without</p>
</b-modal>
</div>
But, what if I want to use a value of a data property, like below example. If I use :v-b-modal="'name'", it uses "name" instead of "testModal".
<div id="app">
<div>
<b-link :v-b-modal="name">Click to Test Modal</b-link>
</div>
<b-modal :id="name" title="Bootstrap Vue Modal">
<p class="my-4">Testing Bootstrap Vue Modal</p>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'testModal'
}
})
</script>
Any help is appreciated on how to use a value of a data property inside v-b-modal.
You just have to remove the two dots v-b-modal="name" and it is going to work.
You can see on this codepen.