Блог

Главная - Вопросы по программированию - Vue3 Добавить html в существующий проект

Vue3 Добавить html в существующий проект

#vuejs3

Вопрос:

Я создал свой первый проект и запустил процесс сборки. У меня есть моя index.html файл, и он работает, если его открыть напрямую.

Я скопировал код на существующую html-страницу, и начальная загрузка страницы в порядке. Однако, когда реквизиты обновляются, привязка (операторы v-if) больше не работает.

Любая помощь была бы очень кстати

Редактирование с помощью примера кода

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

Определяющее состояние отображается при первой загрузке страницы. Журнал консоли запускается при настройке, но готовый компонент не отображается

Прогресс

Я сузил его до других javascript, запущенных на странице. Любой javascript, даже просто

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

Этого достаточно, чтобы сломать его. Помимо добавления дополнительного javascript в Vue, есть ли что-то еще вокруг этого?

Комментарии:

1. Вы не должны использовать created() в сочетании с setup() : v3.vuejs.org/guide/composition-api-lifecycle-hooks.html Однако удивительно, что оператор журнала запускается. Вместо этого ты мог бы использовать onBeforeMount крючок. Но в любом случае, если бы это сработало, вы бы никогда не увидели определяющее состояние, так как оно изменило бы ссылку до фактического рендеринга, который выполняется при монтировании.

Ответ №1:

если я не ошибаюсь, вы не можете получить доступ к api композиции или setup() переменным в api опций (например created , mounted , data , methods и т. Д.). Вы можете использовать beforeMount , как прокомментировал @Thomas, или onMounted импортировав его из vue , например:

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

если вы хотите, чтобы это было проще, вы можете использовать настройку сахара сценария, таким образом, вам не нужно возвращаться stup() . Это может упростить ваш код, но если вы хотите определить реквизиты, подход другой

 <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>
Метки: