CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Nick G
Nick G

Reputation: 1973

Use v-model on a non-input element and bind it to the innerHTML value

Background info

We use a custom directive to deal with localization. It works by providing a content id to the directive like so:

<div v-content="'text.to.translate'"></div>

The directive creates a mapping of all elements which implement the directive and which content id they correspond to. The directive then performs a request using this mapping to fetch all of the translated strings needed to display on the page. Once the request comes back successfully, the response looks like this:

response: {
    'text.to.translate': 'Text to translate',
    'some.other.text': 'Some other text that is translated'
}

This response is joined with the mapped elements like so:

mappedElements.forEach(mappedElem => {
    mappedElem.htmlElem.innerHTML = response[mappedElem.contentId]
});

The corresponding HTML tags would then render as

<div>Text to translate</div>

This all happens outside of components and happens asynchronously once the page is created. There is a use case where I show fetched data in a table, and one of the columns will always correspond to a set list of ~10 strings. However, the data that is returned for this column are the content ids of the strings, rather than the strings themselves. This data would always be fetched after the translated contents were already returned, and for reasons, I do not want to create a separate request with just those content values. I would like to include the 10 strings in the initial content request. For this reason, I'm going to create 10 dummy elements with those specific content id values that will always be part of the initial content fetch.

I made a component that accepts a list of contentIds and display them in the template like so:

<div v-for="content in contentIds">
    <span v-content="content.id"></span>
</div>

I would like to return the translated strings in a list once the values are returned and populated inside of the <spans>. Given that I have no reference to the request being performed within my component, I cannot just simply use a callback to map the data.

My question

I need to basically use the equivalent of a v-model, but on a <span> element, where an element's innerHTML is bound to a variable. If the innerHTML value is changed outside of the component where that element is defined, I still need the component to see the change and be able to update the variable reactively.

Is there a way to do this?

Upvotes: 2

Views: 1053

Answers (1)

Jeyz Strife
Jeyz Strife

Reputation: 11

I know this is old, but for anyone who finds it, you can emit an 'input', it works for both form and non-form elements:

ParentComponent:

<ChildComponent v-model="foo"/>

ChildComponent:

<div @click="$emit('input', 'bar')">Button</div>

Upvotes: 1

Related Questions