How to display the date time picker and element in the same time?
i got problem when I run the program date time picker doesn't show. just "lala" in the element.
<div id="app">
<v-date-picker mode="dateTime" v-model='date'/>
<p>lala</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/v-calendar"></script>
<script>
new Vue({
el: '#app',
data: {
date: new Date(), // settiing default hari yg terpilih waktu pas datepicker ke load hari $ waktu skrng
}
})
</script>
</body>
Separate v-date-picker and the p tag in two separate divs.
<div id="app">
<div>
<v-date-picker mode="dateTime" v-model="date" />
</div>
<div>
<p>{{date}}</p>
<p>lala</p>
</div>
</div>
Related
I am using vuejs and I want to get the value of a div and display it inside of the model. Issue is i Cannot use the recommended refs because I in reality cant modify the html. Does anyone have a basic solution where I can leverage vuejs and push the content to the model where location is?
new Vue({
el: "#app",
data: {
location:''
},
methods: {
test:function(){
if (!this.$refs.myRef) {
console.log("This doesn't exist yet!");
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="FilePathPlaceholder" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive">
<div class="d2l_1_234_979">
<div class="d2l_1_235_849 d2l_1_236_43 d2l-inline">
<span class="d2l-textblock"></span>
<span
class="d2l-textblock d2l_1_237_505 d2l_1_238_137"
id="d2l_1_233_684"
title="/content/Stuff/12183-CC-242/">
/content/Stuff/
<strong>12183-CC-242</strong>/
</span>
<input type="hidden" name="FilePath" id="FilePath" value="/content/Stuff/12183-CC-242/">
</div>
<div class="d2l_1_237_505 d2l-inline">
<span class="d2l-validator" id="d2l_1_239_562"></span>
</div>
</div>
</div>
</div>
I want to bind an image using binding attribute. But reason is that when i run my code it show the Unexpected identifier error
this is my index.html file code
<div id='app'>
<h2>{{product}}</h2>
<div class="flex-container">
<div class="product">
<div class="product-image">
<img v-bind:src="image"/>
</div>
<div class="product-info">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script type="text/javascript" src="main.js"></script>
This is main.js code
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
image : "./img/1.png"
}
})
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image : "./img/1.png"
}
})
You are missing a comma after the product ppty -- 'Socks'
You can check the fiddle here.
https://jsfiddle.net/p0dynL8o/
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.
This code does not repeat the component only displays the number in text input... I want to repeat the component
var app= new Vue({
el:'#app',
data:{
number:Number,
},}
);
<div id="app">
<p>Enter the number you want</p>
<input v-model="number"></input>
<div v-for='i in number'>
<span>{{i}}</span
</div>
</div>
First, you need a value in data, not a type. number: '' or number:0.
Second, you need to convert the text to a number. v-model.number
edit
Third, close your span tag.
The convert the text to a number part is the main reason your code fails though...
var app = new Vue({
el: '#app',
data: {
number: '',
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>Enter the number you want</p>
<input v-model.number="number"></input>
<div v-for='i in number'>
<span>{{i}}</span>
</div>
</div>
I'm having trouble syncing my properties in vue.js, I have an 'active' property that I want to set to the value of each instance 'plan', but at the same time I would like to sync the property with the parent, with no luck. What am I doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Vue</title>
<link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
</head>
<body>
<div class="container">
<div id="app">
<pre>
#{{ $data | json}}
</pre>
<div v-for="plan in plans">
<plan :active.sync="active" :plan.sync="plan"></plan>
</div>
</div>
</div>
<template id="plan_template">
<div>
<span >#{{ plan.name }}</span>
<span >#{{ plan.price }}/month</span>
<button #click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
plans:[
{name:'Executive',price:100},
{name:'Professional',price:50},
{name:'Personal',price:30},
{name:'Free',price:0}
],
active:{},
},
components:{
plan:{
template:'#plan_template',
props:['plan', 'active'],
methods:{
setActivePlan:function(){
this.active=this.plan;
}
}
}
}
});
</script>
</body>
</html>
Note: This answer applies to V2 of Vue JS, < 2.3.0.
If you are using up V2.3.0+ then you can use .sync and .once modifiers: documentation here
You are using version 2 of Vue. The .sync and .once modifiers have been removed. From the docs:
Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.
I have modified your code to use events here:
new Vue({
el:'#app',
data:{
plans:[
{name:'Executive',price:100},
{name:'Professional',price:50},
{name:'Personal',price:30},
{name:'Free',price:0}
],
active:{},
},
methods: {
setActivePlan: function(plan) {
this.active = plan;
}
},
components:{
plan:{
template:'#plan_template',
props:['plan', 'active'],
methods:{
setActivePlan:function(){
// emit an event to the parent indicating that this is the active plan
this.$emit('activate-plan');
}
}
}
}
});
<link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div class="container">
<div id="app">
<div v-for="plan in plans">
<plan :plan="plan"
:active="active"
#activate-plan="setActivePlan(plan)"
>
</plan>
</div>
<pre>
{{ JSON.stringify($data, null, 2) }}
</pre>
</div>
</div>
<template id="plan_template">
<div>
<span >{{ plan.name }}</span>
<span >{{ plan.price }}/month</span>
<button #click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button>
</div>
</template>