I am trying to understand Vue. I am following vuejs.org
I am trying to make the below code work. But I am failing somewhere.
JSFiddle
I have the below code.
var vm = new Vue({
"el":"#app1",
"data":{
showme:true
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-if="showme" id="app1">
<div id="app2">
IF is true
</div>
</div>
<div v-else id="app3">
Else is happening
</div>
A Vue app attaches itself to a single DOM element (#app1 in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.
<div id="app1">
<div v-if="showme">
<div id="app2">
IF is true
</div>
</div>
<div v-else id="app3">
Else is happening
</div>
</div>
var vm = new Vue({
"el":"#app1",
"data":{
showme:false
}
})
Related
If I have the following code, code mirror comes up readonly
<div class="container">
<div class="row">
<div class="col-md-2">
<textarea id="code"><h1>hi</h1></textarea>
</div>
</div>
</div>
<script>
var vue = new Vue(
{
el : ".container",
created() {this.editor = CodeMirror.fromTextArea(document.getElementById('code'), {lineNumbers: true, mode:"htmlmixed"});}
})
</script>
if I change "container" to "container1" so that the vue element doesn't match - it's editable.
How do I fix it?
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 am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.
html:
<div id="app">
<div v-if="isIf === 1">
isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
isIf is 2：{{isIf}}
</div>
<div v-else>
isIf is not 1 or 2：{{isIf}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?
Your v-else-if condition is wrong - instead of
<div v-else-if="2">
it should be
<div v-else-if="isIf === 2">
Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"
I am following Vuejs documentation and trying to emit a value with click event.
The code follows:
Vue Template:
<div id="app">
<div class="container">
<div class="col-lg-offset-4 col-lg-4">
<sidebar v-on:incrementBtn="increment += $event"></sidebar>
<p>{{ increment }}</p>
</div>
</div>
</div>
Vue instances:
Vue.component('sidebar',{
template:`
<div>
<button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">Increment on click</button>
</div>
`,
});
new Vue ({
el:'#app',
data:{
increment:0
}
});
Check Vue Custom Event, Vue always recommends using kebab-case for event names.
And as above Vue guide said:
Unlike components and props, event names don’t provide any automatic
case transformation. Instead, the name of an emitted event must
exactly match the name used to listen to that event.
And
Additionally, v-on event listeners inside DOM templates will be
automatically transformed to lowercase (due to HTML’s
case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.
Vue.component('sidebar',{
template:`
<div>
<button class="btn btn-info" v-on:click="$emit('increment-btn', 1)">Increment on click</button>
</div>
`
})
new Vue ({
el:'#app',
data () {
return {
increment:0
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="container">
<div class="col-lg-offset-4 col-lg-4">
<sidebar v-on:increment-btn="increment += $event"></sidebar>
<p>{{ increment }}</p>
</div>
</div>
</div>
There is no console log error but anything that I put in updated() hook [in the current code getCartItems/] will be rendered infinitely for some reasons that I do not know. even I set it as alert('hi') and it alert it infinitely. So I suspect something makes the project keeps updating values or something but I do not know where. Can anyone give me a suggestion to check where the problem is?
Cart-dropdown.vue
<template>
<div class="row">
<div class="col-md-12">
<div class="row cart-dropdown-row" v-for="cart in carts">
<div class="col-md-3">
<div class="cart-dropdown-img-wrapper">
<img class="d-flex align-self-center cart-dropdown-img" :src="cart.product_choice.img1" alt="Generic placeholder image">
</div>
</div>
<div class="col-md-6 cart-dropdown-info-wrapper">
<h6 class="cart-dropdown-info">{{cart.product.name}}</h6>
</div>
<div class="col-md-3 cart-dropdown-qty-wrapper">
<div class="cart-dropdown-qty">x{{cart.qty}}</div>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row cart-dropdown-checkout-wrapper">
<button type="button" class="btn btn-success btn-sm cart-dropdown-checkout" #click.prevent="goCheckout()">Check Out</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
carts:{},
}
},
props:[
],
mounted(){
this.getCartItems()
},
updated(){
this.getCartItems()
},
methods:{
getCartItems(){
var vm = this
vm.$http.get('/getCartItems/').then((response)=>{
vm.carts = response.data
});
},
goCheckout(){
window.location.href = 'http://localhost:8000/cart'
}
},
computed:{
}
}
</script>
You are updating the vue instance data variable carts in the updated hooks and as docs says: updated hook is called after a data change causes the virtual DOM to be re-rendered and patched. So you are in a infinite loop: you change the vue data it updates the the DOM and call the updated block which again change the data.
This is also mention in the docs:
you can perform DOM-dependent operations in this hook. However, in most cases you should avoid changing state in this hook, because it may lead to an infinite update loop.
You can see this circle in the below vue instance lifecycle diagram.