<component :is="item.component"
:index="i"
v-on:drop="onDrop(e,i)"
/>
--component--
<template>
<div>hello world</div>
</template>
<script>
export default {
emits:['drop']
}
i'm trying to do something like vue3 doc said,but does not work.
update:
these code work
<template>
<div
#drop.stop="(e)=>$emit('onDrop',e)"
>hello world</div>
</template>
<component :is="item.component"
#onDrop="onDrop($event,i)"
/>
but if the component is another component instead a div. in this case failed.
<template>
<v-chart
#drop="(e)=>$emit('onDrop',e)"
class="chart" :option="option" autoresize />
</template>
<component :is="item.component"
#onDrop="onDrop($event,i)"
/>
Related
here it the code that I'm busy with
Any help would be appreciated.
I know this isn't such a complicated issue but
I just Don't know how to fix this
If someone could at least just tell me where to fix it
Or just tell me what the actual problem is.
import Image from 'next/image'
import { Inter } from '#next/font/google'
import 'bulma/css/bulma.css'
import styles from './page.module.css'
import { Head } from 'next/document'
const inter = Inter({ subsets: ['latin'] })
export default function VendingMachine() {
return (
<><div>
<Head>
<title>VendingMachine App</title>
<meta name="description" content="A blockchain vending app" />
</Head>
<Navbar className="navbar">
<div className='container'>
<div className="navbar-brand">
<h1>Vending Machine</h1>
</div>
</div>
</Navbar>
</div>
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing
<code className={styles.code}>src/app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority />
</a>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority />
<div className={styles.thirteen}>
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
</div>
</div>
<div className={styles.grid}>
I've tried multiple things
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
I have several components of Website A (e.g., a customized form) built in Bootstrap. I have Website B build in Docusaurus. Now, I would like to copy these components to Website B. As Bootstrap and Docusaurus have conflict in general. I'm thinking if it is possible to limit the css of Bootstrap to certain components.
For instance, initially, I have a form in a page myForm.mdx.md in Website B:
---
id: 'MyForm'
title: 'MyForm'
sidebar_label: 'MyForm'
---
import MyForm from '../src/components/MyForm';
Page containing MyForm
<MyForm>
</MyForm>
I tried to add <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" ... ... /></Head> to the component of Website A to build src/components/MyForm/index.jsx of Website B:
class MyForm extends React.Component {
constructor(props) {
super(props)
this.state = { successMessage: null }
}
componentDidMount() {}
submit(e) {
this.setState({ successMessage: true })
}
render() {
return (
<>
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Head>
<div className="container--fluid container">
<div className="row">
<div className="col">
<form
method="post"
action="https://www.mywebsite.com/download"
onSubmit={this.submit.bind(this)}
>
<div className="row">
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="First name*"
name="firstname"
required
/>
</div>
</div>
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="Last name*"
name="lastname"
required
/>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 pt-3">
<div className="form-group">
{this.state.successMessage ? (
<div className="alert alert--success">
Thanks for downloading
</div>
) : (
<button
type="submit"
className="btn btnGreen form-control"
style={{background : "var(--ifm-color-primary-darker)" , border:"1px solid var(--ifm-color-primary-darker)" , color: "#fff"}}
>
Download
</button>
)}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</>
)
}
}
export default MyForm
The display of Website B shows that the form does have the Bootstrap style. However, we can see the conflicts in other parts (or children components) of website B: sidebar, navigations, etc.
So does anyone know if it is possible to only apply the css of Bootstrap to the component MyForm?
No, you'll have to override any "problems" caused by Bootstrap with CSS applied AFTER bootstrap.css.
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 been tinkering with web components, and I had the idea to make a <slide-show> component that would work with this syntax:
<slide-show>
<img src="...."/>
<img src="...."/>
<img src="...."/>
<img src="...."/>
</slide-show>
For this, I took a code that was already working, and tried to separate it into a template. A first draft that worked perfectly was this:
Index.html
<slide-show></slide-show>
slideshow.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="slide-show" attributes="foo">
<template>
<div style="width:500px;">
<div id="slides">
<img src="http://placehold.it/300x200&text=6">
<img src="http://placehold.it/300x200&text=7">
<img src="http://placehold.it/300x200&text=8">
<img src="http://placehold.it/300x200&text=9">
<img src="http://placehold.it/300x200&text=0">
</div>
</div>
</template>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.slidesjs.com/examples/standard/js/jquery.slides.min.js"></script>
<script>
Polymer('slide-show', {
foo: 'bar',
ready: function(){
$(this.$.slides).slidesjs({ });
}
});
</script>
</polymer-element>
But when I tried to move the elements outside the template, it is when things went wrong:
Index.html
<slide-show>
<img src="http://placehold.it/300x200&text=6">
<img src="http://placehold.it/300x200&text=7">
<img src="http://placehold.it/300x200&text=8">
<img src="http://placehold.it/300x200&text=9">
<img src="http://placehold.it/300x200&text=0">
</slide-show>
slideshow.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="slide-show" attributes="foo">
<template>
<div style="width:500px;">
<div id="slides">
<content></content>
</div>
</div>
</template>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.slidesjs.com/examples/standard/js/jquery.slides.min.js"></script>
<script>
Polymer('slide-show', {
foo: 'bar',
ready: function(){
$(this.$.slides).slidesjs({ });
}
});
</script>
</polymer-element>
In this case, the slideshow behaves "weirdly". Maybe it is that I have not understand correctly how the <content> tag works. What is wrong in my coding?