I have a quick app that im writing which contains a quick app page that references only a single custom element through the router.push API, the onShow lifecycle function for that page cannot be triggered.
<import name="listone" src="./aa.ux"></import>
<template>
<!-- The template can contain only one root node. -->
<listone></listone>
</template>
<script>
import prompt from '#system.prompt'
export default {
private: {
},
onInit: function() {
},
onShow() {
console.log('Enter a string whatever you like.');
prompt.showToast({
message: 'Enter a string whatever you like.'
})
}, // This function cannot be triggered.
}
</script>
<style>
.demo-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 40px;
text-align: center;
}
</style>
And my aa.ux file
<template>
<div class="container">
<text> Enter some words.</text>
<text>Enter some words.</text>
<text>Enter some words.</text>
<text>Enter some words.</text>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #00fa9a;
}
</style>
<script>
module.exports = {
data: {
},
onInit() {
},
}
</script>
How can i get the onShow function to trigger in this situation?
I have gotten to the 'root' of the issue, the quick app loader does not trigger the onShow lifecycle function if the root node of the page is a custom element. However, the function can be triggered for a subelement. SO the way to get round this for me was to add an extra div element like:
<template>
<!-- The template can contain only one root node. -->
<div>
<listone></listone>
</div>
</template>
Related
i copied the code from async part of the documentation, because that's the 'X' to remove value i want.
here is my general component that i use in other vue components
<template>
<div>
<multiselect
v-model="items"
:options="filteredList"
:multiple="multiple"
:close-on-select="multiple ? false : true"
:show-labels="false"
:placeholder="placeholder"
track-by="id"
:label="label"
#input="inputChanged"
:internal-search="false"
#search-change="searchItems"
>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length" #mousedown.prevent.stop="clearAll(props.search)"></div>
</template>
</multiselect>
</div>
</template>
<script>
export default {
model: {
prop: 'parentItems',
event: 'change',
},
props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'],
data() {
return {
items: this.parentItems,
filteredList: this.list,
}
},
methods: {
searchItems(query) {
let q = latinize(query.toLowerCase().replace(/\s/g,''))
this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q))
},
inputChanged() {
this.$emit('change', this.items);
},
clearAll() {
this.items = this.multiple ? [] : null
},
},
}
</script>
everything works as desired, except the X to clear selection is never displayed.
i found the clear element in console, it has width of 255 and height of 0. i tried to put X between the div tags, like this
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length"
#mousedown.prevent.stop="clearAll(props.search)"
>
X
</div>
</template>
but it would display above the select input field. also changing the height attribute in dev console just made clear space above input field.
what am i missing?
vue-multiselect does nothing special with the clear slot other than render it before the input tags. It leaves the styling and behavior/implementation entirely up to the end user.
In addition, the example from the docs you linked poorly implements the slot, as the provided slot has no contents, so the div won't be visible or clickable, making it effectively useless. Not to mention, it uses the obsolete (pre-2.6) slot syntax of Vue, which would cause warnings on the browser console if using the development build of Vue.
Solution
The clear slot should look like this:
<multiselect v-model="value"
:options="options"
multiple
taggable
#tag="addTag">
<template v-slot:clear>
<button v-if="value.length" class="multiselect__clear" #click="clearSelectedTags">
Ⓧ Clear selection
</button>
</template>
</multiselect>
demo
Thanks to tony19 I went and inspected the part of documentation I mentioned in the question.
I found out that they use different code for the example, so to attain desired effect, I need to add following code to my css.
.multiselect__clear {
position: absolute;
right: 41px;
height: 40px;
width: 40px;
display: block;
cursor: pointer;
/*z-index: 2;*/
}
.multiselect__clear:after, .multiselect__clear:before {
content: "";
display: block;
position: absolute;
width: 3px;
height: 16px;
background: #aaa;
top: 12px;
right: 4px;
cursor: pointer;
}
.multiselect__clear:before {
transform: rotate(45deg);
}
.multiselect__clear:after {
transform: rotate(-45deg);
}
Good day everyone! I'm currently learning vue and I'm following a youtube tutorial on building an image carousel from scratch. Here's the code for the Image Carousel parent component:
<template>
<div class = "slides">
<div class = "slides-inner">
<div v-for= "slide in slides">
<Slide v-bind:slide= "slide"></Slide>
</div>
</div>
</div>
<script>
import Slide from './Slide';
export default{
data(){
return{
slides:[
{ src:'src/assets/slide1.jpg' },
{ src:'src/assets/slide2.jpg' },
{ src:'src/assets/slide3.jpg' },
{ src:'src/assets/slide4.jpg' },
{ src:'src/assets/slide5.jpg' }
]
}
},
components: {
Slide
}
}
</script>
<style scoped>
.slides {
align-items: center;
background-color: #666;
color: #999;
display: flex;
font-size: 1.5rem;
justify-content: center;
min-height: 10rem;
}
</style>
and here's the code for the individual image slides:
<template>
<div class="slide">
{{slide.src}}
</div>
</template>
<script>
export default {
data(){
return{}
},
props: {
slide: ['slide']
}
}
</script>
<style scoped>
</style>
The v-bind on the v-for loop on the parent Image Carousel component is supposed to bind the slide.src property to the current slide being looped so that it will display the image in the browser but what I'm getting is a blank browser screen and an error that says the right value of the operator at v-bind is not an object although the tutorial I'm following works exactly as it should with this same code so I'm wondering what I'm doing wrong.
In your slide component, it should be
export default {
data(){
return{}
},
props: {
slide: Object
}
}
You can check valid props type in Vue document
Please also see the Vue Style Guide as prop definitions should be as detailed as possible. An Essential Requirement by the creators of Vue. See Vue Style Guide.
I am working on a simple Vue app, using vue-cli and webpack for that purpose.
So basicly i have 2 components, a parent and a child component ~
like this:
<template>
<div class="triPeaks__wrapper">
<div class="triPeaks">
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
</div>
<div class="triPeaks__line">
<tower-line :towerLine="towerLineCards" />
</div>
<tri-pack />
</div>
</template>
the towerLineCards is the important thing there, it is a prop that is passed to the tower-line component, it is basicly a array with 10 elements, it is a array with 10 numbers that are shuffled, so it can be something like that:
[1,5,2,6,8,9,16,25,40,32]
this array is create via beforeMount on the lifecycle.
On the child component:
<template>
<div class="towerLine-wrapper">
<div class="towerLine">
<img v-for="index in 10" :key="index" class="towerLine__image" :src="getImage(index)" alt="">
</div>
</div>
</template>
<script>
export default {
props: {
towerLine: {
type: Array,
required: true
}
},
method: {
getImage (index) {
return '#/assets/images/cards/1.png'
}
}
}
</script>
<style lang="scss">
.towerLine {
display: flex;
position: relative;
top: -90px;
left: -40px;
&__image {
width: 80px;
height: 100px;
&:not(:first-child) {
margin-left: 3px;
}
}
}
</style>
the issue is with the :src image that i am returning via the getImage(), this way it is not working. If i change to just src it works just fine, i did this way just to test, because the number in the path should be dynamic when i got this to work.
What is wrong with this approach? any help?
Thanks
Firstly, you should use a computed property instead of a method for getImage().
And to solve the other problem, you could add require(YOUR_IMAGE_PATH) when you call your specific image or put it inside /static/your_image.png instead of #/assets/images/cards/1.png.
I'm making an e-commerce type menu in Vue.js, with items which are divs that contain a fair amount of functionality and images. Performance is fairly good when rendering about 200 of these items, but when more than that many are added the site begins to perform sluggishly.
What's the best way to conditionally hide or remove Vue elements from the DOM if they are outside the current scrollable view (like ScrollViews in iOS)? Are there any plugins or libraries that can help with the performance of long lists of data items in Vue.js?
Thanks!
I've made a demo snippet using the package I mentioned in my comment.
I've made a "signal" item that acts as the watcher. When the "signal" item leaves the viewport, the "complex-stuff" is no longer rendered. I did it this way so you can see the "complex-stuff" disappear. When the "signal" scrolls back into view, the "complex-stuff" is rendered.
You could just put the watcher on the widget root element and things will only be hidden when the whole widget is out of view. You don't want to put the v-if on the root element, though, or it will never come back once it goes away.
const containerMonitor = scrollMonitor.createContainer(document.body);
new Vue({
el: '#app',
data: {
ids: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
},
components: {
widget: {
template: '#widget-template',
props: ['id'],
data() {
return {
visible: true
};
},
mounted() {
const elementWatcher = containerMonitor.create(this.$el.querySelector('.signal'));
elementWatcher.enterViewport(() => {
this.visible = true;
});
elementWatcher.exitViewport(() => {
this.visible = false;
});
}
}
}
});
.widget-container {
height: 200px;
margin: 10px;
background-color: #f0f0f0;
display: flex;
flex-flow: row wrap;
}
.signal {
height: 10px;
width: 10px;
margin: 30px;
background-color: red;
border: thin solid blue;
}
.complex-stuff {
flex-basis: 100%;
padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://rawgit.com/stutrek/scrollMonitor/master/scrollMonitor.js"></script>
<template id="widget-template">
<div class="widget-container">
<div class="signal">
</div>
<div v-if="visible" class="complex-stuff">
This is widget {{id}}.
Blah blah blah.
</div>
</div>
</template>
<div id="app">
Widgets below:
<widget v-for="id in ids" :id="id"></widget>
:widgets above
</div>
I'm new on WinJS development and I started with the WinJS tutorial. After updating my HTML and adding a WinJS.UI.SplitView I can't see the WinJS.UI.SplitViewCommands.
BTW when I toggle the pane I can't see the icons neither
Result
This is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WePin</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- WePin references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<div id="app" class="show-home">
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<!--this is a button that allows you to "toggle" the menu in and out of view -->
<button class="win-splitviewpanetoggle" data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"></button>
<div class="title">SplitView Pane area</div>
</div>
<!--this is where the navigation icons go -->
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{
label: 'Alki Trail',
icon: 'mappin',
onclick: mySplitView.trailClicked
}"></div>
</div>
</div>
<!--/ Pane area-->
<!-- Content area -->
<div class="contenttext"><h2 class="win-h2">SplitView Content area</h2></div>
<!--/ Content area -->
</div>
</div>
</body>
</html>
CSS
.content,
#app {
height: 100%;
}
#app .win-splitviewpanetoggle {
float: left;
}
/* SplitView pane content style*/
#app .header {
white-space: nowrap;
}
#app .title {
font-size: 25px;
left: 50px;
margin-top: 6px;
vertical-align: middle;
display: inline-block;
}
#app .nav-commands {
margin-top: 20px;
}
#app .win-splitview-pane-closed .win-splitviewcommand-label {
/* Make sure pane content doesn't scroll if
SplitViewCommand label receives focus while pane is closed.
*/
visibility: hidden;
}
/*SplitView content style*/
#app .win-splitview-content {
background-color: rgb(112,112,112);
}
#app .contenttext {
margin-left: 20px;
margin-top: 6px;
}
Javascript
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize your application here.
} else {
// TODO: This application was suspended and then terminated.
// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
};
app.start();
})();
I had the same problem. Fixed by updating WinJS to latest version. Based on the changelog, SplitViewCommand is a new feature on WinJS v4.2