CODEWITHSUNDEEP
vue.jsecmascript-6
sof-03
sof-03

Reputation: 2505

The style do not works in the render template function

The style do not works in the render template function:

h('div', { style: {} }, [
  h('label', "Hello: ", {style: { fontWeight: "500"}}),
  h('label', "world")
])

Upvotes: 0

Views: 49

Answers (2)

aircraft
aircraft

Reputation: 26896

You should put the params in the correct order:

h('label', {style: { fontWeight: "500"}}, "Hello: "),

Or you can pass the innerHTML like bellow:

h('div', { style: {} }, [
  h('label', { domProps: { innerHTML:"Hello: " }, style: { fontWeight: "500"}}),
  h('label', "world")
])

for detail.

Upvotes: 0

Ferrybig
Ferrybig

Reputation: 18834

You have the order of the text and the style tag in the wrong way around.

h('label', "Hello: ", {style: { fontWeight: "1500"}}),

Should be:

h('label', {style: { fontWeight: "1500"}}, "Hello: "),

Also, 1500 is an invalid value for font-weight, this is inside the initial revision of your question, it should be 900 at most, example:

new Vue({
  render: function(h) {
    return h('div', { style: {} }, [
      h('label', {style: { fontWeight: "900" }}, "Hello: "),
      h('label', "world")
    ])
  },
}).$mount("#app")
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.runtime.js"></script>

<div id="app"></div>

Upvotes: 1

Related Questions