how can I swap content of a div with Vue.js? I think I lack general lifecycle knowledge. Here is what I´ve got so far. After all I need to swap between two Vue-instances and ´d like to use only one lightbox container for them.
Here is what I´ve got so far: http://jsbin.com/qokerah/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script type="x-template" id="foo-template">
<div class="text">{{ fooText }}</div>
<div class="confirm" v-if="fooConfirm">confirmed</div>
</script>
<script type="x-template" id="bar-template">
<div class="heading">{{ barHeading }}</div>
<div class="info">{{ barInfo }}</div>
</script>
<div class="foo">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open foo template</div>
</div>
<div class="bar">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open bar template</div>
</div>
<div class="lightbox">
<div class="lightbox-content">Show foo- or bar-template</div>
</div>
</body>
</html>
JS
var foo = new Vue({
el: '.foo',
data: {
fooText: 'text',
fooConfirm: false
},
methods: {
swapLightboxContent: function () {
console.log('Show foo-template');
}
}
});
var bar = new Vue({
el: '.bar',
data: {
barHeading: 'text',
barInfo: 'text'
},
methods: {
swapLightboxContent: function () {
console.log('Show bar-template');
}
}
});
Ok, my main misconception where:
I Used var foo and bar as new Vue() instances without having a parent "intersection" instance
so this is now working:
http://jsbin.com/tiwoco/edit?html,js,output
Still need to figure out if accessing the currentView item through vmFoo and vmBar instances shouldn´t be done in foo and bar components :)
Related
Simple code example
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-for="currency in info">
{{ currency.description }}
<span v-html="currency.symbol"></span>{{ currency.rate_float || currencyToDeciaml }}
</div>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
info : null,
},
filters : {
currencyToDeciaml(val) {console.log(`foo`);
return Number(val).toFixed(2);
}
},
// Dom is ready so now load the data
mounted() {
axios.get(`https://api.coindesk.com/v1/bpi/currentprice.json`)
.then(response => this.info = response.data.bpi);
},
});
</script>
</body>
</html>
I am trying to apply a simple filter currencyToDeciaml but it doesn't even get executed and foo does not display. I cannot seem to figure it out. Any help would be appreciated.
The correct syntax for filters is this:
{{ currency.rate_float | currencyToDeciaml }}
with only one pipe
I want to add an eventhandler on my component. When I click the button I want the component to show. I tried all kinds of solutions but I think my knowledge is lacking. Here is my code, I would be thankful for help. Feel free to explain what the best methods are for solving this problem and how I should think in scenarios like these. Appricitate your time.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>SneakPeak</title>
</head>
<body>
<div id="body-div">
<div id="app">
<modal-button></modal-button>
<modal-1 v-if="modalStatus == 2"></modal-1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
JAVASCRIPT
// Define a new component called button-counter
Vue.component('modal-button', {
data: function () {
return {
count: 0,
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// Defining a component called modal-1
Vue.component('modal-1', {
props: ["sModal"],
template: `
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
`
})
var shaba = new Vue({
el: '#app',
props: ["sModal"],
data: {
modalStatus: 0
},
})
// // register modal component
// Vue.component('modal', {
// template: modalTemplate
// })
// // start app
// new Vue({
// el: '#body-div',
// data: {
// showModal: false
// }
// })
Old Answer:
if you want to show/hide your component on click then use #click="val = !val" on the button component and use v-if or v-show="val" on the modal componant to enable/ disable Display.
set val: false in your data.
New Answer:
Looks Like you button is already capturing click so please follow this pen https://codepen.io/ashwinbande/pen/WPozgR
what we are doing is on button click executing a method which increments count as well as emits a custom event. In button component on that event, we change the value of val. then the val is used to show hide the modal component`!
I'm just doing following the Vuetable tutorial to use it in my own app, but my browser shows a blank page. Vue dev tools always says "Vue.js is not detected"; I feel like I'm missing something simple. I've followed the tutorial verbatim, and works in JSFiddle. Does anyone see the problem?
Main.js:
Vue.use(Vuetable);
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
components:{
'vuetable-pagination': Vuetable.VuetablePagination
},
data: {
fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'] },
computed: {},
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
editRow(rowData){
alert("You clicked edit on"+ JSON.stringify(rowData))
},
deleteRow(rowData){
alert("You clicked delete on"+ JSON.stringify(rowData))
}
},
})
HTML File:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test environment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Use Vue framework -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<!-- Supporting javascript -->
<script src="https://unpkg.com/smiles-drawer#1.0.2/dist/smiles-drawer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<!-- vuetable-2 dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<!-- vuetable-2 -->
<script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
<script src="main.js"></script>
<div id="app">
<div class="ui container">
<vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" #vuetable:pagination-data="onPaginationData"
data-path="">
<template slot="actions" scope="props">
<div class="table-button-container">
<button class="ui button" #click="editRow(props.rowData)">
<i class="fa fa-edit"></i> Edit
</button>
<button class="ui basic red button" #click="deleteRow(props.rowData)">
<i class="fa fa-remove"></i> Delete
</button>
</div>
</template>
</vuetable>
<vuetable-pagination ref="pagination" #vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>
</div>
</body>
</html>
1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;" id="app">
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
</script>
</body>
</html>
And this is my result which does not show me data :
2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;">
<div class="ui container" style="margin:20px;">
<div class="ui segment" id="app">
<h1>{{ article.title }}</h1>
<p>
{{ article.message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
article{
message: "Hello, world!",
title: "How about you?"
}
}
})
</script>
</body>
</html>
So I wonder if there some conflicts when I was using semanticUI and vue.js?
As a best practice, you can create a top level div#app, like this:
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<body style="background-color:black;">
<div id="app"><!-- just a wrapper for vuejs -->
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
</div>
</body>
I wrote simple Backbone.js app from manual, but this does't work. Why?
It is a HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="source/jquery.js"></script>
<script src="source/underscore.js"></script>
<script src="source/backbone.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li>Start</li>
<li>Success</li>
<li>Error</li>
</ul>
</div>
<div id="start" class="block">
<div class="userplace">
<label>Enter name<input type="text" id="username"></label>
</div>
<div class="buttonplace">
<input type="button" id="button" value="Check">
</div>
</div>
<div id="error" class="block">
<p>Error - not found!</p>
</div>
<div id="success" class="block">
<p>Win!</p>
</div>
</body>
</html>
And it is a JS-code:
var Controller = Backbone.Router.extend({
routes: {
'': 'start',
'!/': 'start',
'!/error': 'error',
'!/success': 'success'
},
start: function() {
$('.block').hide();
$('#start').show();
},
error: function() {
$('.block').hide();
$('#error').show();
},
success: function() {
$('.block').hide();
$('#success').show();
},
});
var controller = new Controller();
var Start = Backbone.View.extend({
el: '#start',
events: {
'click #button': 'check'
},
check: function() {
console.log('WiN!');
if($("#username").val() == 'test') {
controller.navigate('success', true);
}
else {
controller.navigate('error', true);
}
}
});
var starter = new Start();
Backbone.history.start();
When I select point in menu, all work normal, but when I entered name into field and press button nothing happens. Event not activated. Why?
I think you're calling navigate incorrectly.
Try this:
controller.navigate('!/success', {trigger:true});
Documentation:
http://backbonejs.org/#Router-navigate