Giter Club home page Giter Club logo

Comments (4)

EkaterinaVu avatar EkaterinaVu commented on May 26, 2024

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&amp;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.

vesper8 avatar vesper8 commented on May 26, 2024

@EkaterinaVu @phre1

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&amp;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.

EkaterinaVu avatar EkaterinaVu commented on May 26, 2024

@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.

vesper8 avatar vesper8 commented on May 26, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.