How to render curly brace in vue component when dynamically adding input field as inner html?

Question

I am working on a UI Builder project using Vue JS and Pinia. This app has an editor section and an output section side by side. The editor section contains several input fields like name, image, and text colour which are bonded to the output section to show the reactive data.

On a certain button click user can add dynamic input fields as well. When the button is clicked the following method from pinia data store is triggered to add another HTML div with an input field in the editor section and a respective one in the output section.

My problem is that the Vue js curly brace is not working properly when rendering in the Vue component as I am setting it as a Javascript string. `{{ dataStore.fieldsData.link }}

triggered method:

addLink() {
    console.log("add link");
    const editor = document.getElementById("editor");
    const newEditorDiv = document.createElement('div');
    newEditorDiv.className="w-full";
    newEditorDiv.classList.add("mb-5");
    newEditorDiv.innerHTML=`
        <label class="tracking-wide text-gray-700 text-md font-bold mb-7" for="">
            Link
        </label>
        <input
            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
            id="" type="text" v-model="dataStore.fieldsData.link" />
    `;
    editor.append(newEditorDiv);
        
    // --------------------------------
    const output = document.getElementById("output");
    const newOutputDiv = document.createElement('div');
    newOutputDiv.className="w-full mb-5";
    newOutputDiv.innerHTML=`
        <div class="w-full text-center mt-10 px-5 py-3 shadow bg-gray-300 rounded">
            {{  dataStore.fieldsData.link  }}
        </div>
    `;
    output.append(newOutputDiv);
}

Mina · Accepted Answer · 2022-08-29 17:09:14Z

2

You can't add a Vue code as innerHTML to an element and expect it to work, it will be inserted as it is.

I recommend you to use Render Functions to dynamically add Vue template.

answered Aug 29, 2022 at 17:09

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render curly brace in vue component when dynamically adding input field as inner html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related