I would like to create a QSplitter with 5 items in it
<div class="q-px-md">
<Buttons/>
<Buttons/>
<Buttons/>
<Buttons/>
<Buttons/>
</div>
As I run through the documentation, I can not find a way to implement it with these 5 items?
You could embed QSplitter into another QSplitter like this:
<q-splitter v-model="splitterModel" style="height: 400px">
<template v-slot:before>
<q-splitter v-model="splitterModel" style="height: 400px">
<template v-slot:before>
<q-btn color="white" text-color="black" label="Standard" />
</template>
<template v-slot:after>
<q-splitter v-model="splitterModel" style="height: 400px">
<template v-slot:before>
<q-btn color="primary" label="Primary" />
</template>
<template v-slot:after>
<q-btn color="secondary" label="Secondary" />
</template>
</q-splitter>
</template>
</q-splitter>
</template>
<template v-slot:after>
<q-splitter v-model="splitterModel" style="height: 400px">
<template v-slot:before>
<q-btn color="amber" glossy label="Amber" />
</template>
<template v-slot:after>
<q-btn color="brown-5" label="Brown 5" />
</template>
</q-splitter>
</template>
</q-splitter>
For your reference:
Documentation
Codepen: https://codepen.io/hoangdng-the-sans/pen/WNJBNBY
Related
I am new to using Vue3 (composition API) with bootstrap 5 and came across a problem:
When I render a list, and pass each element as a prop as so:
<div :key="item.id" v-for="item in items">
<EditItem :item="item"/>
</div>
I can modify the props values just fine inside of EditItem.vue (the props are JSON objects), but when I am inside a modal I can only modify the values for the 1st index. My code looks something like this:
<script setup>
defineProps({
item: {
type: Object,
required: true
},
})
</script>
<template>
<!-- Let's me edit all items in list just fine -->
<input type='text' v-model="item.name">
<div> {{item.name}} </div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Edit Item
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<!-- Will only let me edit the first indexed list item -->
<label for="name" class="form-label">Item name</label>
<input type='text' class="form-control" id="name" placeholder="John Doe" v-model="item.name">
<div> {{ item.name }} </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
I think this happens due to the modal being treated as a different document/context so vue3 re-renders everything, so the indexing restarts from 1. I am not sure how to fix this issue, any help is appreciated. Thanks
Edit:
My problem is similar to the issue described in this question: How to show fresh bootstrap modal data when using Vue.js
However, it hasn't been answered properly and is from 2018
Edit 2:
Solved:
It was a simple fix, simply take the modal out of the v-for loop. Only have the button inside the loop. And yes, I realize you cannot edit the values of a prop inside of a child component. I simplified the code, as the code with the form I have is quite long due to the many fields in my JSON objects.
Props are readonly. To be able to edit array, you need to emit delete function where you have this array. Your "Lets me edit all items" not working too. It just edits a local variable, not an array.
This is how you make reusable form:
form.vue
<template>
<form #submit.prevent="$emit('onSubmit', data)">
<input type="text" v-model="data.name" />
<button type="submit">Save</button>
</form>
</template>
<script setup>
const props = defineProps({ item: { type: Object, required: true }})
const data = reactive(props.item)
defineEmits(['onSubmit'])
</script>
parent.vue
<template>
<form :item="item" #on-submit="editItem"></form>
</template>
<script setup>
function editItem(data) {
// Edit array here.
}
</stript>
I've an issue on vue3 component.
I'm calling the same component two times "pillCheck"
when clicking on the second it change the first
<pillCheck :key="1">
<template v-slot:spanFalse> Metric </template>
<template v-slot:spanTrue> Imperial </template>
</pillCheck>
<pillCheck :key="2">
<template v-slot:spanFalse> Pierre </template>
<template v-slot:spanTrue> Camille </template>
</pillCheck>
and the component is as follow :
<template lang="html">
<div class="pill">
<input
id="checkbox"
#change="changeValue($event)"
type="checkbox"
class="switch-checkbox"
/>
<label for="checkbox" class="switch-label">
<span><slot name="spanFalse"></slot></span>
<span><slot name="spanTrue"></slot></span>
<div
class="switch-toggle"
:class="{ 'switch-toggle-checked': isTrue }"
></div>
</label>
</div>
</template>
<script setup>
import { ref } from "vue";
const isTrue = ref(false);
function changeValue(evt) {
console.log(evt);
isTrue.value = !isTrue.value;
}
</script>
Thanks for your help
I have a layout like this. What I want is to let the image box next to the Render 3D button move below the button:
My Code is here
<div id="modeling">
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-8">
<div className="modeling-text">
<h2>3D MODELING</h2>
<h3>Upload a 2D image to get a 3D model</h3>
<input className="btn btn-secondary" id="fileInput" name="file" type="file" onChange={fileChangedHandler} />
<button className="btn btn-primary" style={{float:"left", marginLeft: "10px"}} ng-click="showConfirm() "
ng-if="fileName.length > 0" id="renderButton">
Render 3D Model
</button>
<img src={file} alt={""} width="300" height="300" text-align="left" />
</div>
</div>
</div>
</div>
</div>
Can someone help me to move this? Thanks a lot
just display it as block
<img src={file} alt={""} width="300" height="300" text-align="left" style={{display:'block'}} />
I've tried half a dozen different ways to do this but i'm not sure what the issue is.
To start, here is a quick drawing of what im trying to accomplish:
What I want:
http://prntscr.com/br8xh6
whats happening:
http://prntscr.com/br8z8p
What seems to be happening is that my .row .full-row is being rendered twice, and the dynamic template is not being loaded into my <div class="col-md-10> as defined. Why would this be?
Heres my current code:
<body>
<div class="container full-container">
{{> navbar}}
{{> middle}}
</div>
</body>
<template name="navbar">
...
</template>
<template name="middle">
<div class="row full-row">
<div class="col-md-2 left-bar" style="background:#800000;">
{{> Template.dynamic template=sidebar}}
</div>
<div class="col-md-10">
{{> Template.dynamic template=content}}
</div>
</div>
<!-- </div> -->
</template>
<template name="leftbar">
<div class="row">
<div class="col-md-12">
{{> avatar size="large" shape="circle"}}
</div>
</div>
</template>
<template name="usercard">
<div class="col-md-4">
<div class="thumbnail thumb-dark">
<img src="default.png" alt="...">
<div class="caption">
<h3>Player name</h3>
<p>...</p>
Join
</div>
</div>
</div>
</template>
<template name="home">
<div class="row">
{{#each playerslooking}}
{{> usercard}}
{{/each}}
</div>
</template>
<template name="find_page">
<div style="height:150px;width:150px;background:blue;">hello</div>
</template>
JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
}
});
FlowRouter.route('/find/:_id', {
name: 'postfind.show',
action: function() {
BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
}
});
I've refactored my code several times trying to debug this, as I'm not sure how BlazeLayout is suppose to work with nested templates.
All input appreciated, thanks.
Just in case, did you have a try at Blaze Layout root modification?
See: https://github.com/kadirahq/blaze-layout#set-different-root-node
I m working on Zk project what i need to do is create a popup for every element inside a loop using binding .
here what i have tried to do so far but it s not seem to work
<hlayout children="#bind(menu.listMenu)" style=" padding:0px; margin:0px;" >
<template name="children">
<a sclass="menuItem" tooltip="'#bind(each.icon)' , position=after_center" iconSclass="#bind(each.info)" href="#bind(each.link)" ></a>
<popup id="#bind(each.info)">
<div>
<label value="#bind(each.info)"> </label>
</div>
</popup>
</template>
</hlayout>
Can you help me pls ? thx
Change your code to :
<hlayout children="#bind(menu.listMenu)" style=" padding:0px; margin:0px;" >
<template name="children">
<a sclass="menuItem" tooltip="${each.info}, position=after_center" iconSclass="#bind(each.info)" href="#bind(each.link)"/>
<popup id="${each.info}">
<div>
<label value="#bind(each.info)"> </label>
</div>
</popup>
</template>
</hlayout>