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