Vue3 Add html to existing project

user_794558 0
Viewed 769

I’ve built my first project and have run the build process. I have my index.html file and it works if opened directly.

I’ve copied the code into an existing html page and the initial page load is fine. However, when props get updated, binding (v-if statements) no longer works.

Any help would be great

Edit with code example

<script>

    import { ref } from "vue";
    import Determining from './Determining.vue'
    import Ready from './Ready.vue'

    export default {

        components: {
            'Determining': Determining,
            'Ready': Ready,
        },

        setup() {

            let checkout = ref({
                state: 'determining',
            });

            return {
                checkout,
            };

        },

        created() {
            this.checkout.state = 'ready';
            console.log("I am getting here");
        }
   }
</script>

<template>
    <Determining v-if="checkout.state == 'determining'" />
    <Ready v-if="checkout.state == 'ready'" />
</template>

The determining state is shown when the page first loads. The console log is firing in setup, but Ready component is not showing

Progress

I've narrowed it down to other javascript running on the page. Any javascript, even just

<script>console.log("hello");</script>

Is enough to break it. Other than adding additional javascript to Vue, is there anyway around it?

vuejs3
1 Answers

if I'm not wrong, you can't access composition api or setup() variables in options api (such as created, mounted, data, methods etc). You can use beforeMount as @Thomas commented or onMounted by importing it from vue, for the example:

<script>

    import { ref, beforeCreate } from "vue";
    import Determining from './Determining.vue'
    import Ready from './Ready.vue'

    export default {

        components: {
            'Determining': Determining,
            'Ready': Ready,
        },

        setup() {
            beforeCreate(()=> {
              checkout.state.value = 'ready';
              console.log("I am getting here");
            })

            let checkout = ref({
                state: 'determining',
            });

            return {
                checkout,
            };

        }
   }
</script>

<template>
    <Determining v-if="checkout.state == 'determining'" />
    <Ready v-if="checkout.state == 'ready'" />
</template>

if you want it more simple, you can use script sugar setup, this way you don't need to return in stup(). It can make your code simpler but if you want to define props, the approach is different

<script setup>

    import { ref, beforeCreate } from "vue";
    import Determining from './Determining.vue'
    import Ready from './Ready.vue'

    beforeCreate(()=> {
      checkout.state.value = 'ready';
      console.log("I am getting here");
    })

    let checkout = ref({
        state: 'determining',
    });
</script>

<template>
    <Determining v-if="checkout.state == 'determining'" />
    <Ready v-if="checkout.state == 'ready'" />
</template>
user_115618880
Related