Comments (4)
Hi @vesper8 ,
We tried the code below and everything works as intended. If the issue persists, please provide us with some details such as code examples and expected behavior so we could reproduce the problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Requires Vue version 3.x -->
<script src="https://unpkg.com/vue@next"></script>
<!-- Flow Form -->
<script src="https://unpkg.com/@ditdot-dev/[email protected]"></script>
<!-- Flow Form base CSS -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.min.css">
<!-- Optional theme.css -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.theme-minimal.min.css">
<!-- Optional font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript (content of app.js):
var app = Vue.createApp({
el: '#app',
template: `
<flow-form v-bind:questions="questions" v-bind:language="language">
<template v-slot:completeButton>
<h3>Button content</h3>
</template>
</flow-form>
`,
data: function () {
return {
language: new VueFlowForm.LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
questions: [
new VueFlowForm.QuestionModel({
title: 'Question',
type: VueFlowForm.QuestionType.MultipleChoice,
options: [
new VueFlowForm.ChoiceOption({
label: 'Answer'
})
]
})
]
}
}
}).component('FlowForm', VueFlowForm.FlowForm);
const vm = app.mount('#app');
from vue-flow-form.
Apologies I should have been more clear about one thing. I've opted to not use the template
directive and have my html directly inside the index.html
since it's more convenient for allowing the editor to handle auto-indenting and colour highlighting. Especially since in my use-case the template is quite large so I prefer to have it this way.
All functionalities work fine when doing this except for the one I reported with the completeButton
slot not working.
What's odd is that the complete
slot DOES work, only the completeButton
slot does not work.
Using the code you posted above, but commenting out the template:
part from app.js
and having an index.html
file that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Requires Vue version 3.x -->
<script src="https://unpkg.com/vue@next"></script>
<!-- Flow Form -->
<script src="https://unpkg.com/@ditdot-dev/[email protected]"></script>
<!-- Flow Form base CSS -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.min.css">
<!-- Optional theme.css -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.theme-minimal.min.css">
<!-- Optional font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap">
</head>
<body>
<div id="app">
<flow-form v-bind:questions="questions" v-bind:language="language">
<template v-slot:complete>
complete
</template>
<template v-slot:completeButton>
<h3>Button content</h3>
</template>
</flow-form>
</div>
<script src="js/app-test.js"></script>
</body>
</html>
When using the template:
directive, both slots works, when putting the template inside index.html
, only the complete
slot works.
Any idea why that is?
Many thanks
from vue-flow-form.
@vesper8 ,
it looks like the problem is caused by camel-cased slot name. Until we figure out how to solve this, you can try the workaround - add buttonslot: 'completeButton'
to data
in app.js
an then use it inside index.html
like this:
<template v-slot:[buttonslot]>
<h3>Button content</h3>
</template>
from vue-flow-form.
@EkaterinaVu thank you, that does work.
I had also tried writing it like this but that didn't work <template v-slot:complete-button>
from vue-flow-form.
Related Issues (20)
- Bug: Refreshing on a mobile browser does not show warning prompt and causes data to be lost HOT 2
- Bug:incorrect email validation expression HOT 3
- Feature request: slot **BeforeStart** HOT 4
- Bug: Matrix doesn't work properly HOT 1
- Feature request: Make it simpler to change basic styles such as font-size HOT 1
- Feature request: Allow us to abort / prevent the onSubmit HOT 1
- Bug: App crashes when updating the questions HOT 2
- Question: how to set submitted manually in Vue 3 Composation Api HOT 3
- multiple choice with max selected option. HOT 7
- Feature request: JSON set of question HOT 1
- Global Variables (or previous answers) via QuestionModel? HOT 1
- Feature request: use links to fire other methods not only urls HOT 2
- Skip to submit page HOT 6
- Bug: Question component blank page with more than one question HOT 1
- Feature request: Max number of selections in multiple select
- Issue with Vite 3.0.9 defaults HOT 1
- In the multipleChoice question, if multiple=True and the jump statement is included, the previously selected value does not disappear and the value is added. HOT 1
- Bug: v-if conditional questions do not work HOT 5
- Bug: Alt tab gives shouldFocus undefined
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-flow-form.