Injecting components in vue, component comes from async API call, how to make the v-model in this component work?

42 Views Asked by At

I Have the following:, A vue3 app with a pinia store, the data from the pinistore comes from an API, no problem so far, data gets stored in a pnia store just fine. I also have the html part in the same store within the key HTML.

From the same API I get the html and stylesheets that are generated by a headless cms. Now I like to register that html I get tru the API as a component and use things like v-html, to make a reference to the json that holds the data. I like it to be a ref, because i want to change the data in the html, like a front end editor and save the manipulated json back to the API.

So the html is loaded like this:

<div v-html="documents[1].html"> </div>

this works because of this:

<script>
    import { useDocumentStore } from "@/stores/DocumentStore";
    import { storeToRefs } from "pinia";
    const documentStore = useDocumentStore();
    const { documents } = storeToRefs(useDocumentStore())

    export default {
        name: "Editor",
        components: {},
        setup(){
            return {
                documentStore,
                documents
            }
        },
....

I have multiple documents so [1] is the first in this test. When I change the html in the store, like the the text in the header, it will change as expected. But now I would like that the text in the header is also changed in the json. So i edited the html that comes from the cms (I control what is send from the cms also), to this:

<h2 class="heading-h2 has-line" v-html="documents[1].json[527][1].title">Nice title for you!</h2>

Hoping that the v-model would also work in here, but it does not..

When I paste this line <h2 class="heading-h2 has-line" v-html="documents[1].json[527][1].title">Nice title for you!</h2> , to test, below this line: <div v-html="documents[1].html"> </div> where the html is loaded, this one line works, so I know that my link to the json works.

but just not inside the first v-model

Is there a way to make this work? To somehow init the v-model inside a reactive v-model...

0

There are 0 best solutions below